Jump to content
dbhynds

Navigation tabs script trouble in IE only

Recommended Posts

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";  }

Edited by dbhynds

Share this post


Link to post
Share on other sites

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="";

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...