使用 jquery 的选项卡
我目前有一个选项卡式系统，但是它并没有完全按照我的需要进行操作，我希望通过导航到最后带有 #tab2 后缀的 URL，它将导航到我的选项卡式页面和中存在的选项卡URL 将是活动的，但是序列中的第一个选项卡始终处于活动状态，有没有办法首先检查 URL 中传递的内容，如果存在 #tabid，则将该选项卡设为当前选项卡？我的 JavaScript 目前看起来像这样，
$(".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 activeTab = $(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;
});
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 activeTab = $(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;
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以使用
window.location.hash获取要使用它的哈希值。因此，像
使用
hasClass作为通用替代品来过滤LI一样。You can get the hash to use it by using
window.location.hash.So something like
Using
hasClassas a generic stand-in for however you want to filter yourLIs down.我建议您使用 JQUERY
http://jqueryui.com/demos/tabs 构建的 TAB UI /#ajax
它也可以节省您的时间，并且还可以进行自动选择...此外，它还有一个 AJAX 选项，因此可以根据请求加载页面，而无需更改页面。
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.
为什么不使用 jQuery UI 选项卡插件 http://jqueryui.com/demos/tabs/ ？
Why not use the jQuery UI Tabs plugin http://jqueryui.com/demos/tabs/ ?