选项卡式内容之间的jQuery链接
我有以下代码:,我如何设置它,使我可以有url到不同的标签,我已经尝试添加标签id到url,但这不起作用。我也尝试过锚定,但没有效果,非常感谢您的帮助。您必须通过绑定单击事件手动触发选项卡切换功能 HTML: 此链接将像您单击了选项卡一样工作 它将找到激活选项卡的链接,并触发单击事件选项卡式内容之间的jQuery链接,jquery,html,css,url,Jquery,Html,Css,Url,我有以下代码:,我如何设置它,使我可以有url到不同的标签,我已经尝试添加标签id到url,但这不起作用。我也尝试过锚定,但没有效果,非常感谢您的帮助。您必须通过绑定单击事件手动触发选项卡切换功能 HTML: 此链接将像您单击了选项卡一样工作 它将找到激活选项卡的链接,并触发单击事件 编辑以适合asker的HTML您可以非常轻松地完成此操作。由于您的列表按照外观顺序与选项卡本身相对应,因此您不需要ID,您可以这样做: HTML 这是将锚定添加到URL的行: window.location.has
编辑以适合asker的HTML您可以非常轻松地完成此操作。由于您的列表按照外观顺序与选项卡本身相对应,因此您不需要ID,您可以这样做: HTML 这是将锚定添加到URL的行:
window.location.hash = tabs.eq(current).attr('href');
请注意,这在小提琴中不起作用。或者你可以省去这一行,像我在上面的源代码中那样添加真实的URL
我还优化了您的代码,以便使用更少的选择器,而且代码更短。并且它还为当前元素使用单个类active
(而不是将一个类应用于所有inactive
元素)。你只需要调整你的风格
我还添加了一些CSS,默认情况下显示第一个元素并隐藏所有其他元素-无需JavaScript:
.container {
display:none;
}
.container:first-child {
display:block;
}
不停摆弄
如果你可以用纯css做你需要做的事情,请告诉我你是否对此感兴趣,请在你的问题中发布代码。您的问题完全依赖非现场链接才有用,这是不可接受的。即使删除了所有链接,您的问题也必须保留其含义。是的,它是一个CSS2.1选择器,适用于所有浏览器和IE7+。
<ul id="tabs">
<li><a href="http://domain.com/#tab1">test1</a></li>
</ul>
<div>
<div class="container">Some content1</div>
</div>
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();
});
window.location.hash = tabs.eq(current).attr('href');
.container {
display:none;
}
.container:first-child {
display:block;
}