我真的需要一些关于 jquery 选项卡的帮助。我已经找到了我要问的问题的一些答案,但问题是大多数 jquery 选项卡使用“a”标签进行导航,我花了一些时间让我的标签在没有“a”标签的情况下工作。我想保持这种状态是有充分理由的。
这是我的问题。我有一个运行良好的 jquery 选项卡。但是,当我尝试在同一页面中放置多个选项卡时,它们相互矛盾。
这是指向 jsfiddle 的链接.我试图复制 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 -->
这是我的 jquery 代码的样子:
$(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();
});
我真的需要一些帮助。提前致谢!
最佳答案
使用 class
而不是 id
,它们是唯一的选择器,您希望使用相同的代码处理多个选项卡。还可以使用 siblings()
来隐藏或删除不是事件元素的类。这里更新了fiddle
关于javascript - 在同一页面上有多个 jquery 选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42736539/