tabs using jquery
I currently have a tabbed system in place, however it not doing exactly as I need it too, I was hoping that by navigating to the URL with #tab2 suffixed on then end it would navigate to my tabbed page and the tab that is present in the URL would be the one that is active, however the first tab in the sequence is always active, is there a way to check what is being passed in the URL first and if there is #tabid present then make that tab the current tab? My javascript currently looks like this,
$(".tab_content").hide(); //Hide all content
$("ul.tabNavigation li.shortlist").addClass("active").show(); //Activate first tab (in this case second because of floats)
$(".tab_content#shortlist").show(); //Show first tab content
//On Click Event
$("ul.tabNavigation li").click(function() {
$("ul.tabNavigation li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var acti开发者_如何学PythonveTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
You can get the hash to use it by using window.location.hash
.
So something like
var hash = window.location.hash;
if (hash) {
$("ul.tabNavigation li").hasClass(hash).click();
}
Using hasClass
as a generic stand-in for however you want to filter your LI
s down.
I would suggest you to use the TAB UI built by JQUERY
http://jqueryui.com/demos/tabs/#ajax
it would save you time aswell, and do the auto selection aswell... Plus it has a AJAX option so pages are loaded on request without having to change page.
Why not use the jQuery UI Tabs plugin http://jqueryui.com/demos/tabs/ ?
精彩评论