Are you looking to create an active tab effect in a navigation bar, but your links are on different pages? Fear not, there is a way using Jquery to fetch the url and make the tab active.
In this example, we give the specific tab a class "active":
var tabs = $('ul.tabs');
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> li > a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href') + "Tab";
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
If you want this to work with links to other pages within your site, alter the html like so:
<ul id="nav" class="tabs">
<li><a href="/" title="Home" class="active">Home</a></li>
<li><a href="/about/" title="About us">About</a></li>
<li><a href="/demo/" title="Demo">Demo</a></li>
<li><a href="/where/" class="dir" title="Where">Where</a></li>
<li><a href="/contact/" class="dir" title="Contact Us">Contact Us</a></li>
</ul>
The jquery provided above currently only works for #tab1, #tab2 etc. To make the tab active depending on the current page name, some adjustments might be necessary. Sorry if this is a bit unclear, the concept can be tricky to explain!