jQuery从URL设置活动选项卡
jQuery从URL设置活动选项卡
提问于 2012-08-10 02:05:03
我有这个标签系统：
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
if($(this).parent().hasClass('active')) {
/** active **/
} else {
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show('slide', {}, 500);
}
return false;
});
});
<div id="tabs">
<ul>
<li><a href="#tab-1">1</a></li>
<li><a href="#tab-2">2</a></li>
<li><a href="#tab-3">3</a></li>
<li><a href="#tab-4">4</a></li>
<li><a href="#tab-5">5</a></li>
</ul>
<div id="tab-1">
Content tab1
</div>
<div tab2... etc如果我在URL的末尾添加# tab -3，它应该会自动显示并将tab 3设置为活动状态，而无需我单击它。
这有可能以一种简单的方式实现吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-08-10 02:13:30
在进一步查看您的代码后进行编辑-
如果每次DOM准备就绪时都用这两行代码编写代码，那么您总是会看到第一个选项卡。
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');在决定是否应该显示第一个选项卡之前，您必须先检查url中的“# tab”。
$(function(){
...
var hash = window.location.hash;
if(hash){
$('a[href="' + hash +'"]').parent('li').addClass('active');
var elementID = hash.replace('#', '');
$(elementID).show();
} else {
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
}
...
}Stack Overflow用户
发布于 2012-08-10 02:19:47
这可能会起作用：
$(window).bind( 'hashchange', function( event ) {
var hash=window.location.hash;
if(!hash){return;}
$('a[href="'+hash+'"]').click();
});
$(window).trigger('hashchange');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11889365
复制相关文章
相似问题
腾讯云开发者
