Trying to design a user-friendly, multi-tabbed navigation system within a single webpage. This is how the content structure looks:
HTML
<ul id="nav">
<li><a href="tab1">Tab 1</a></li>
<li><a href="tab2">Tab 2</a></li>
<li class="active"><a href="tab3">Tab 3</a></li>
</ul><!--/#nav-->
<div id="content-box">
<div id="tab1">
<!--content from tab1-->
</div><!--/#tab1-->
<div id="tab2">
<!--content from tab2-->
</div><!--/#tab2-->
<div id="tab3">
<!--content from tab3-->
</div><!--/#tab3-->
</div><!--/#content-box-->
JQuery:
$("#nav li").on("click", function(event){
$("#nav li").removeClass("active");
$(this).addClass("active");
$("#content-box").children().hide();
});
Stuck at linking the li with the active class to the respective div. All tab divs are hidden by default and I've created a class called .activeSlide to toggle visibility.