选择不在CSS
我写的网页;我遇到active element的问题。
你可以看到我的问题。
当我尝试单击第二个选项卡或第三个选项卡（它只与第一个选项卡一起使用）时，我不知道它似乎失败了，我无法单击另一个子元素选项卡。
你能看到我的pen。
$(document).ready(function() {
(function ($) {
$('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
$('.tab ul.tabs li a').click(function (g) {
var tab = $(this).closest('.tab'),
index = $(this).closest('li').index();
console.log(tab + ' ' + index);
tab.find('ul.tabs > li').removeClass('current');
$(this).closest('li').addClass('current');
tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
g.preventDefault();
} );
})(jQuery);
});
var tabsFn = (function() {
function init() {
setHeight();
}
function setHeight() {
var $tabPane = $('.tab-pane'),
tabsHeight = $('.nav-tabs').height();
$tabPane.css({
height: tabsHeight
});
}
$(init);
})();@import url(http://fonts.googleapis.com/css?family=Roboto:300);
.tab {
padding-top: 50px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
background: #fff;
width: 100%;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
line-height: 1.5;
font-weight: 300;
color: #888;
-webkit-font-smoothing: antialiased;
}
.tabs {
display: table;
position: relative;
overflow: hidden;
margin: 0;
width: 100%;
}
.tabs li {
float: left;
line-height: 38px;
overflow: hidden;
padding: 0;
position: relative;
}
.tabs a {
background-color: #eff0f2;
border-bottom: 1px solid #fff;
color: #888;
font-weight: 500;
display: block;
letter-spacing: 0;
outline: none;
padding: 0 20px;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-bottom: 2px solid #87d3b7;
}
.tabs_item {
display: none;
padding: 30px 0;
}
.tabs_item h4 {
font-weight: bold;
color: #87d3b7;
font-size: 20px;
}
.tabs_item img {
width: 200px;
float: left;
margin-right: 30px;
}
.tabs_item:first-child {
display: block;
}
.current a {
color: #fff;
background: #87d3b7;
}
body {
background-color: #ddd;
}
h3 {
margin-top: 0;
}
.badge {
background-color: #777;
}
.tabs-left {
margin-top: 3rem;
}
.nav-tabs {
float: left;
border-bottom: 0;
}
.nav-tabs li {
float: none;
margin: 0;
}
.nav-tabs li a {
margin-right: 0;
border: 0;
background-color: #333;
}
.nav-tabs li a:hover {
background-color: #444;
}
.nav-tabs .glyphicon {
color: #fff;
}
.nav-tabs .active .glyphicon {
color: #333;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
border: 0;
}
.tab-content {
margin-left: 45px;
}
.tab-content .tab-pane {
display: none;
background-color: #fff;
padding: 1.6rem;
overflow-y: auto;
}
.tab-content .active {
display: block;
}
.list-group {
width: 100%;
}
.list-group .list-group-item {
height: 50px;
}
.list-group .list-group-item h4, .list-group .list-group-item span {
line-height: 11px;
}<div class="tab">
<ul class="tabs">
<li><a href="#">Tab01</a></li>
<li><a href="#">Tab02</a></li>
<li><a href="#">Tab03</a></li>
</ul> <!-- / tabs -->
<div class="tab_content">
<div class="tabs_item">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
<li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
<li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
<li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
<li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="c">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d">Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</div> <!-- / tabs_item -->
<div class="tabs_item">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
<li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
<li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
<li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
<li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="c">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d">Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</div> <!-- / tabs_item -->
<div class="tabs_item">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
<li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
<li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
<li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
<li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="c">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d">Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</div> <!-- / tabs_item -->
</div> <!-- / tab_content -->
</div> <!-- / tab -->
1 个答案:
答案 0 :(得分：1)
尝试使用此codepen
$(document).ready(function() {
(function ($) {
$('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
$('.tab ul.tabs li a').click(function (g) {
var tab = $(this).closest('.tab'),
index = $(this).closest('li').index();
console.log(tab + ' ' + index);
tab.find('ul.tabs > li').removeClass('current');
$(this).closest('li').addClass('current');
tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
g.preventDefault();
} );
})(jQuery);
});
var tabsFn = (function() {
function init() {
setHeight();
}
function setHeight() {
var $tabPane = $('.tab-pane'),
tabsHeight = $('.nav-tabs').height();
$tabPane.css({
height: tabsHeight
});
}
$(init);
})();@import url(http://fonts.googleapis.com/css?family=Roboto:300);
.tab {
padding-top: 50px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
background: #fff;
width: 100%;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
line-height: 1.5;
font-weight: 300;
color: #888;
-webkit-font-smoothing: antialiased;
}
.tabs {
display: table;
position: relative;
overflow: hidden;
margin: 0;
width: 100%;
}
.tabs li {
float: left;
line-height: 38px;
overflow: hidden;
padding: 0;
position: relative;
}
.tabs a {
background-color: #eff0f2;
border-bottom: 1px solid #fff;
color: #888;
font-weight: 500;
display: block;
letter-spacing: 0;
outline: none;
padding: 0 20px;
text-decoration: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
border-bottom: 2px solid #87d3b7;
}
.tabs_item {
display: none;
padding: 30px 0;
}
.tabs_item h4 {
font-weight: bold;
color: #87d3b7;
font-size: 20px;
}
.tabs_item img {
width: 200px;
float: left;
margin-right: 30px;
}
.tabs_item:first-child {
display: block;
}
.current a {
color: #fff;
background: #87d3b7;
}
body {
background-color: #ddd;
}
h3 {
margin-top: 0;
}
.badge {
background-color: #777;
}
.tabs-left {
margin-top: 3rem;
}
.nav-tabs {
float: left;
border-bottom: 0;
}
.nav-tabs li {
float: none;
margin: 0;
}
.nav-tabs li a {
margin-right: 0;
border: 0;
background-color: #333;
}
.nav-tabs li a:hover {
background-color: #444;
}
.nav-tabs .glyphicon {
color: #fff;
}
.nav-tabs .active .glyphicon {
color: #333;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
border: 0;
}
.tab-content {
margin-left: 45px;
}
.tab-content .tab-pane {
display: none;
background-color: #fff;
padding: 1.6rem;
overflow-y: auto;
}
.tab-content .active {
display: block;
}
.list-group {
width: 100%;
}
.list-group .list-group-item {
height: 50px;
}
.list-group .list-group-item h4, .list-group .list-group-item span {
line-height: 11px;
}<div class="tab">
<ul class="tabs">
<li><a href="#">Tab01</a></li>
<li><a href="#">Tab02</a></li>
<li><a href="#">Tab03</a></li>
</ul> <!-- / tabs -->
<div class="tab_content">
<div class="tabs_item">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
<li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
<li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
<li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
<li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="c">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d">Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</div> <!-- / tabs_item -->
<div class="tabs_item">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#a1" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
<li><a href="#b1" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#c1" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
<li><a href="#d1" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
<li><a href="#e1" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
<li><a href="#f1" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a1">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b1">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="c1">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d1">Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e1">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f1">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</div> <!-- / tabs_item -->
<div class="tabs_item">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><a href="#a2" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
<li><a href="#b2" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
<li><a href="#c2" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
<li><a href="#d2" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
<li><a href="#e2" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
<li><a href="#f2" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a2">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b2">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="c2">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d2">Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e2">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f2">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
</div> <!-- / tabs_item -->
</div> <!-- / tab_content -->
</div> <!-- / tab -->
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？