I have a simple jQuery tabs application that works fine but I wanted to basically duplicate the navigation at the bottom each tab/page so I could have a "Next" and "Back" button. I figured since their ID's would be pointing to the same place, they'd create active instances for both buttons. So if it's on tab one, it'll show a "Next" button pointing to #two. When I click on "Next", it does go to tab 2 but it doesn't update the active state for the top button. I don't understand how jQuery differentiates which one is clicked because their target ID's are the same, and UL class is the same...
But here is the basic HTML code:
Code:
<div id="top_navigation">
<ul class="idTabs">
<li class="info_one"><a href="#one" >Appraiser Information</a></li>
<li class="info_two"><a href="#two">Contract</a></li>
</ul>
</div>
<div id="one">
Tab one content goes here
<div id="bottom_navigation">
<ul class="idTabs">
<li class="contract"><a href="#two">Next</a></li>
</ul>
</div>
</div>
<div id="two">
Tab two content goes here
<div id="bottom_navigation">
<ul class="idTabs">
<li class="contract"><a href="#one">Back</a></li>
</ul>
</div>
</div>
And here is where I
think the active states are updated in the jQuery code:
Code:
if(s.click && !s.click.apply(this,[id,idList,tabs,s])) return s.change;
//Clear tabs, and hide all
for(i in aList) $(aList[i]).removeClass(s.selected);
for(i in idList) $(idList[i]).hide();
//Select clicked tab and show content
$(this).addClass(s.selected);
$(id).show();
return s.change; //Option for changing url
}
//Bind idTabs
var list = $("a[href*='#']",tabs).unbind(s.event,showId).bind(s.event,showId);
list.each(function(){ $("#"+this.href.split('#')[1]).hide(); });
Is there a way to modify this so the active states update on both buttons?