我有以下代码:fiddle ,我该如何设置它以便我可以拥有指向不同选项卡的 url,我尝试将选项卡 ID 添加到 url,但这不起作用。我也尝试过 anchor ,但没有用,感谢任何帮助。
最佳答案
你可以很容易地做到这一点。由于您的列表按照出现顺序与选项卡本身相对应,因此您不需要 ID,您可以这样做:
HTML
<ul id="tabs">
<li><a href="http://domain.com/#tab1">test1</a></li>
</ul>
<div>
<div class="container">Some content1</div>
</div>
JavaScript
var tabs = $('#tabs a');
var content = $('.container');
var current = 0;
tabs.click( function(event) {
// get which element was clicked
var pos = tabs.index ($(event.target) );
// remove current active class
tabs.eq(current).removeClass('active');
// fade out current element
content.eq(current).fadeOut( function() {
//afterwards set current to selected, update class and fade in content
current = pos;
tabs.eq(current).addClass('active');
content.eq( current ).fadeIn();
// append hash to url
window.location.hash = tabs.eq(current).attr('href');
});
event.preventDefault();
});
这是将 anchor 添加到 URL 的行:
window.location.hash = tabs.eq(current).attr('href');
请注意,这在 fiddle 中不起作用。或者您可以像我在上面的源代码中所做的那样,将这一行去掉并添加真实的 url。
我还优化了您的代码,以便使用更少的选择器并且更短一些。它还为当前元素使用单个类 active
(而不是将类应用于所有 inactive
元素)。你只需要调整你的风格。
我还添加了一些 CSS,它默认显示第一个元素并隐藏所有其他元素——不需要 JavaScript:
.container {
display:none;
}
.container:first-child {
display:block;
}
fiddle
关于选项卡式内容之间的 jQuery 链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11723864/