选项卡式内容:从“tab 1”中的链接打开“tab 5”
选项卡式内容:从“tab 1”中的链接打开“tab 5”
提问于 2013-10-16 20:14:30
我有一些标签内容在我的网站上使用jQuery。当涉及到jQuery时，我是一个新手，我不能解决我的问题。
我在tab-1的content div中有一个链接，当它被点击时，我想跳到tab-5。
我试过做一些事情，但我的知识太有限了，我不知道怎么做，所以它起作用了。
我的HTML：
<div class="tabbox">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Overview</li>
<li class="tab-link" data-tab="tab-2">Features</li>
<li class="tab-link" data-tab="tab-3">Images</li>
<li class="tab-link" data-tab="tab-4">Compare</li>
<li class="tab-link" data-tab="tab-5">Order</li>
</ul>
<div id="tab-1" class="tab-content current">
<a>click to open tab 5</a>
</div>
<div id="tab-2" class="tab-content">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-3" class="tab-content">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-4" class="tab-content">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-5" class="tab-content">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>我的CSS：
.tabbox{
width: 100%;
margin: 0 auto;
}
ul.tabs{
margin: 0 0 -1px 0;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: #fff;
color: #ff3399;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: #fff;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
border-left: 1px solid #999999;
border-bottom: 1px solid #fff;
color: #ff3399;
}
.tab-content{
display: none;
background: #fff;
border: 1px solid #999999;
padding: 15px;
}
.tab-content.current{
display: inherit;
}我的JS：
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})有人知道我是怎么做到的吗？任何帮助都将不胜感激！
回答 1
Stack Overflow用户
发布于 2013-10-16 20:30:34
尝尝这个
分配类标签-链接到'a‘
<a class="tab-link" data-tab="tab-5">click to open tab 5</a>Jquery
$(document).ready(function(){
$('.tab-link').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$("li.tab-link[data-tab='"+ tab_id+"']").addClass('current');
$("#"+tab_id).addClass('current');
});
})Jsfiddle http://jsfiddle.net/9gjtw/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19403110
复制相关文章
相似问题
腾讯云开发者
