Navigation tabs script trouble in IE only

[dbhynds]

Hi all, I'm trying to create a page that has several tabs, each with their own unique content. I have my navigation as an inline list, with content divs below it. I created some javascript that, when a nav item is clicked, sets all of the content divs to display:none and sets the corresponding content div to display:block. I tested it across Firefox, Safari, Chrome and IE. It works in all of them except IE. I get the following error: Object doesn't support this property or method. Here is a live example: http://bit.ly/cbktTw Here is the relevant HTML:

	 <div class="content tab1 left">		 <div class="tabnav">			 <ul>				 <li><a id="link1" class="this"  href="java script:tab('about','link1');">About  Program</a></li>				 <li><a id="link2"  href="java script:tab('students','link2');">Our  Students</a></li>				 <li><a id="link3"  href="java script:tab('apply','link3');">How to  Apply</a></li>				 <li><a id="link4"  href="programpage-info.html">Request More Info</a></li>			 </ul>		 </div>		 <div class="tabContent visible" id="about">			 <div class="visible" id="content1">				 <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Curabitur luctus leo eget tortor ultricies posuere.  Donec tincidunt nulla at enim eleifend nec cursus enim sagittis.  Vestibulum adipiscing porta justo in suscipit. Proin turpis leo, congue  ac consectetur vel, porta eu nisi. Pellentesque at metus quis augue  commodo condimentum. Integer ultricies mauris orci. Proin eget turpis  lectus. Aliquam auctor nulla at urna ultrices eu iaculis nulla semper.  Curabitur ligula mauris, luctus id semper blandit, scelerisque at  nunc.</p>			 </div>		 </div>		 <div class="tabContent hidden" id="students">			 <div class="visible" id="content1">				 <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Curabitur luctus leo eget tortor ultricies posuere.  Donec tincidunt nulla at enim eleifend nec cursus enim sagittis.  Vestibulum adipiscing porta justo in suscipit. Proin turpis leo, congue  ac consectetur vel, porta eu nisi. Pellentesque at metus quis augue  commodo condimentum. Integer ultricies mauris orci. Proin eget turpis  lectus. Aliquam auctor nulla at urna ultrices eu iaculis nulla semper.  Curabitur ligula mauris, luctus id semper blandit, scelerisque at  nunc.</p>			 </div>		 </div>		 <div class="tabContent hidden" id="apply">			 <div class="visible" id="content1">				 <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Curabitur luctus leo eget tortor ultricies posuere.  Donec tincidunt nulla at enim eleifend nec cursus enim sagittis.  Vestibulum adipiscing porta justo in suscipit. Proin turpis leo, congue  ac consectetur vel, porta eu nisi. Pellentesque at metus quis augue  commodo condimentum. Integer ultricies mauris orci. Proin eget turpis  lectus. Aliquam auctor nulla at urna ultrices eu iaculis nulla semper.  Curabitur ligula mauris, luctus id semper blandit, scelerisque at  nunc.</p>			 </div>		 </div>	 </div>

And here is the relevant java script:

 function tab(acontent,alink) {	 	 link1=document.getElementById("link1");	 link2=document.getElementById("link2");	 link3=document.getElementById("link3");	 link1.className="";	 link2.className="";	 link3.className="";	 	 active1=document.getElementById("about");	 active2=document.getElementById("students");	 active3=document.getElementById("apply");	 active1.className="tabContent hidden";	 active2.className="tabContent hidden";	 active3.className="tabContent hidden";	 		 	 obj=document.getElementById(acontent);	 thislink=document.getElementById(alink);	 obj.className="tabContent visible";	 thislink.className="this";  }

[dsonesuk]

it looks like there is a conflict with the variable names link1, link2 and link3, maybe because they match the id reference, may have something to do with the old way of referencing an element. link1=document.getElementById("link1"); link2=document.getElementById("link2"); link3=document.getElementById("link3"); link1.className=""; link2.className=""; link3.className="";Anyway by changing the variable names it seem to fix the problem. mylink1=document.getElementById("link1"); mylink2=document.getElementById("link2"); mylink3=document.getElementById("link3"); mylink1.className=""; mylink2.className=""; mylink3.className="";

[dbhynds]

That was the problem! Thanks so much for the help.

[dsonesuk]

if you declare them as variable, this also works var link1=document.getElementById("link1"); var link2=document.getElementById("link2"); var link3=document.getElementById("link3");