Javascript 在同一页面上有多个jquery选项卡
我真的需要一些关于jquery选项卡的帮助。对于我将要问的问题,我已经找到了一些答案,但问题是大多数jquery选项卡都使用标记进行导航,我花时间让我的选项卡在没有标记的情况下工作。我想保持这种状态有一个很好的理由 这是我的问题。我有一个jquery选项卡,它工作得非常好。但当我试图在同一页中放置多个选项卡时,它们相互矛盾 这里有到的链接。我试图复制jquery代码并更改ID和类以符合第二个选项卡,但似乎无法使其工作 假设我的主页上有5个内容部分,我希望第2部分和第5部分有选项卡 以下是css:Javascript 在同一页面上有多个jquery选项卡,javascript,jquery,html,css,tabs,Javascript,Jquery,Html,Css,Tabs,我真的需要一些关于jquery选项卡的帮助。对于我将要问的问题,我已经找到了一些答案,但问题是大多数jquery选项卡都使用标记进行导航,我花时间让我的选项卡在没有标记的情况下工作。我想保持这种状态有一个很好的理由 这是我的问题。我有一个jquery选项卡,它工作得非常好。但当我试图在同一页中放置多个选项卡时,它们相互矛盾 这里有到的链接。我试图复制jquery代码并更改ID和类以符合第二个选项卡,但似乎无法使其工作 假设我的主页上有5个内容部分,我希望第2部分和第5部分有选项卡 以下是css:
#tabs-nav-wrap {padding:10px 0; text-align: center;}
#tabs-nav-wrap ul {display: inline-block; list-style: none;}
#tabs-nav-wrap ul li {
list-style: none;
display: inline-block;
margin:0 3px;
}
#tabs-nav li {
list-style: none;
display: block;
padding:10px 20px;
background: #736565;
font-size: 16px;
font-weight: 300;
cursor: pointer;
color: #fff;
text-align: left;
text-decoration: none;
border:1px solid #615656;
}
#tabs-nav .tab-nav-link.current,
#tabs-nav .tab-nav-link:hover {
border:1px solid #5eaace;
background: #74c1e4;
}
.tab-content {padding:20px 0; text-align: center;}
以下是HTML:
<div id="tabs-nav-wrap">
<ul id="tabs-nav">
<li class="tab-nav-link" data-target="#tab-one">TAB 1</li>
<li class="tab-nav-link" data-target="#tab-two">TAB 2</li>
<li class="tab-nav-link" data-target="#tab-three">TAB 3</li>
</ul>
<div style="clear:both;"></div>
</div><!-- ends tabs-nav-wrap -->
<div class="tabs-main-content">
<div id="tab-one" class="tab-content"><!-- Begins tab-one -->
<div class="tab-inner">
<p>Tab 1 content here.</p>
</div>
</div>
<div id="tab-two" class="tab-content"><!-- Begins tab-two -->
<div class="tab-inner">
<p>Tab 2 content here.</p>
</div>
</div>
<div id="tab-three" class="tab-content"><!-- Begins tab-three -->
<div class="tab-inner">
<p>Tab 3 content here.</p>
</div>
</div>
<div style="clear:both;"></div>
</div><!-- # tabs-main-content -->
我真的需要一些帮助。提前谢谢 使用class而不是id,它们是唯一的选择器,您希望用相同的代码处理多个选项卡。还可以使用同级隐藏或删除非活动元素的类。这里更新了小提琴似乎起作用了fine@ILikeToMoveItMoveIt是的,小提琴正在工作。请阅读我的问题,了解我正在努力实现的目标。我希望在同一页上有多个选项卡。例如,内容部分2的第一个选项卡和内容部分5的第二个选项卡。
$(function() {
$('.tab-content:not(:first)').hide();
$('#tabs-nav .tab-nav-link').bind('click', function(e) {
$this = $(this);
$target = $($this.data("target")); // get the target from data attribute
$('#tabs-nav .tab-nav-link.current').removeClass('current');
$('.tab-content:visible').fadeOut("fast", function() {
$this.addClass('current');
$target.fadeIn("fast");
});
}).filter(':first').click();
});