This is my first time programming with JavaScript and HTML. I need to create a page that has clickable tabs that don't navigate away from the page. I've got everything set up I just need to know if there is a way to embed links into my tab content for example I have: function f1() {document.getElementById("contenttab").firstChild.nodeValue="Tab 1 Content Goes Here";} function f1() {document.getElementById("contenttab").firstChild.nodeValue="Tab 2 Content Goes Here";} I want to know if its possible using that code to do something like: function f1() {document.getElementById("contenttab").firstChild.nodeValue="<a href="tab1.html">Tab 1</a> Content Goes Here";} Thanks in advance.
I can't understand exactly what you mean. However, if you don't want to navigate, use 'onclick' attribute of the link (or any dom element) or href:'javascript:myFunction()'.
Sorry, I'm trying to set up something similar to this websites tabs on the opening page: http://www.waterloomin.com/ Right now I have it set up so you can click on the tab and the content changes but in that content we need to have links to other parts of our website but I cannot figure out how to do this with JavaScript.
.....nodevalue="<a href='mylink.htm'>This is a link</a>" although, there are other easier ways to go about this.
Here is an example for you: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Javascript tab example.</title> <style type="text/css" > #cp1 { background-color:Gray; border: solid 1px black; width: 400px; height: 300px; padding: 5px; } #cp1 div { display: none; } #tabs { width: 100%; padding: 5px; } #tabs td { border: solid 1px black; cursor: pointer; text-align: center; } </style> </head> <body> <div id="cp1"> <table id="tabs" cellspacing="5px"> <tr> <td>Tab1</td> <td>Tab2</td> <td>Tab3</td> <td>Tab4</td> </tr> </table> <div> This is my <font color="red">first tab.</font> Here is a <a href="http://www.google.com">link</a>. </div> <div> Second tab. </div> <div> Third tab. </div> <div> Fourth tab. </div> </div> <script type="text/javascript"> //get all the tabs and divs for quick access var myTabs = document.getElementById("tabs").getElementsByTagName("td"); var myDivs = document.getElementById("cp1").getElementsByTagName("div"); //show the first tab by default showTab(0) //iterate through all the tabs and create an onclick handler for each for(i=0; i<myTabs.length; i++) { //assign a new attribute tabNo to each tab, so it can easily find the corresponding div when clicked myTabs(i).setAttribute("tabNo", i); myTabs(i).onclick = function() { //retrieve the value of the previous mentioned 'tabNo' attribute var tabNo = this.getAttribute("tabNo"); hideAll(); showTab(tabNo); } } function hideAll() { //hides all the divs and makes all the tabs their 'non-selected' color: gray for(i=0; i<myDivs.length; i++) { myDivs(i).style.display = "none"; myTabs(i).style.backgroundColor = "gray"; } } function showTab(tabNo) { //change the clicked tab's color to the 'selected' color: lightgrey and show the div myTabs(tabNo).style.backgroundColor = "lightgrey"; myDivs(tabNo).style.display = "block"; }</script> </body> </html> Code (markup): With this method you can easily add new tabs and add new content with html code etc... without having to change the javascript each time.
Thanks for the code. But it doesn't seem to work. On Firefox there is just the grey box and when you click the tab buttons nothing happens. On IE the content for the first tab shows up but when you click any other tab the content disappears. The error I get from the firefox error console says "myTabs is not a function". It says the error is on line 85 but I think its actually on line 64.
johnson's code does work: http://mooshell.net/x3T9u/ - only you need to replace myTab( ) instances with myTab[ ] instead.
I'm a networking guy not a programmer so I appreciate the help. I have it working. Now all i needs to do it style it. Thank you both very much.
why is that dimitar_christoff? should i be using [] instead of () ??? I tested with both ie7 and ff3.
erm - because it is an array and not a function. array[key] = value etc, whereas func(argument)... i thought it was a typo or something although an array in js is also an object so you can also do array.key = value - still - you can't do array(key) = value (unless you prototype array somehow to a function...)