开发者

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 LIs 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/ ?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜