0
私はウェブページを作成します。 active elementに問題があります。CSSで選択していない要素を選択してください
あなたは私の問題を知ることができます。私は私が2番目のタブまたは3番目のタブ（それが唯一の最初のタブでの作業）をクリックしようとしたときに失敗するようで知らない、と私は別の子要素]タブをクリックすることはできません
。
私のpenが見えますか？
$(document).ready(function() {
\t (function ($) {
\t \t $('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
\t \t
\t \t $('.tab ul.tabs li a').click(function (g) {
\t \t \t var tab = $(this).closest('.tab'),
\t \t \t \t index = $(this).closest('li').index();
console.log(tab + ' ' + index);
\t \t \t
\t \t \t tab.find('ul.tabs > li').removeClass('current');
\t \t \t $(this).closest('li').addClass('current');
\t \t \t
\t \t \t tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
\t \t \t tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
\t \t \t
\t \t \t g.preventDefault();
\t \t });
\t })(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">
\t <ul class="tabs">
\t \t <li><a href="#">Tab01</a></li>
\t \t <li><a href="#">Tab02</a></li>
\t \t <li><a href="#">Tab03</a></li>
\t </ul> <!--/tabs -->
\t <div class="tab_content">
\t \t <div class="tabs_item">
\t <div class="container">
\t <div class="row">
\t <div class="col-md-12">
\t <div class="tabs-left">
\t <ul class="nav nav-tabs">
\t <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
\t <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
\t <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
\t <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
\t <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
\t <li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
\t </ul>
\t <div class="tab-content">
\t <div class="tab-pane active" id="a">
\t <h3>Who do you Love?</h3>
\t <ul class="list-group pull-left">
\t <li class="list-group-item">
\t <h4>Jen <span class="badge pull-right">100%</span></h4>
\t </li>
\t </ul>
\t </div>
\t <div class="tab-pane" id="b">
\t <h3>What's your Favorite?</h3>
\t <ul class="list-group pull-left">
\t <li class="list-group-item">
\t <h4>Crystals <span class="badge pull-right">100%</span></h4>
\t </li>
\t </ul>
\t </div>
\t <div class="tab-pane" id="c">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
\t <div class="tab-pane" id="d">Aliquam in felis sit amet augue.</div>
\t <div class="tab-pane" id="e">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
\t <div class="tab-pane" id="f">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
\t </div><!-- /tab-content -->
\t </div><!-- /tabbable -->
\t </div><!-- /col -->
\t </div><!-- /row -->
\t </div><!-- /container -->
\t \t </div> <!--/tabs_item -->
\t \t <div class="tabs_item">
\t <div class="container">
\t <div class="row">
\t <div class="col-md-12">
\t <div class="tabs-left">
\t <ul class="nav nav-tabs">
\t <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
\t <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
\t <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
\t <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
\t <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
\t <li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
\t </ul>
\t <div class="tab-content">
\t <div class="tab-pane active" id="a">
\t <h3>Who do you Love?</h3>
\t <ul class="list-group pull-left">
\t <li class="list-group-item">
\t <h4>Jen <span class="badge pull-right">100%</span></h4>
\t </li>
\t </ul>
\t </div>
\t <div class="tab-pane" id="b">
\t <h3>What's your Favorite?</h3>
\t <ul class="list-group pull-left">
\t <li class="list-group-item">
\t <h4>Crystals <span class="badge pull-right">100%</span></h4>
\t </li>
\t </ul>
\t </div>
\t <div class="tab-pane" id="c">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
\t <div class="tab-pane" id="d">Aliquam in felis sit amet augue.</div>
\t <div class="tab-pane" id="e">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
\t <div class="tab-pane" id="f">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
\t </div><!-- /tab-content -->
\t </div><!-- /tabbable -->
\t </div><!-- /col -->
\t </div><!-- /row -->
\t </div><!-- /container -->
\t \t </div> <!--/tabs_item -->
\t \t <div class="tabs_item">
\t <div class="container">
\t <div class="row">
\t <div class="col-md-12">
\t <div class="tabs-left">
\t <ul class="nav nav-tabs">
\t <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span></a></li>
\t <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star"></span></a></li>
\t <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones"></span></a></li>
\t <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time"></span></a></li>
\t <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar"></span></a></li>
\t <li><a href="#f" data-toggle="tab"><span class="glyphicon glyphicon-cog"></span></a></li>
\t </ul>
\t <div class="tab-content">
\t <div class="tab-pane active" id="a">
\t <h3>Who do you Love?</h3>
\t <ul class="list-group pull-left">
\t <li class="list-group-item">
\t <h4>Jen <span class="badge pull-right">100%</span></h4>
\t </li>
\t </ul>
\t </div>
\t <div class="tab-pane" id="b">
\t <h3>What's your Favorite?</h3>
\t <ul class="list-group pull-left">
\t <li class="list-group-item">
\t <h4>Crystals <span class="badge pull-right">100%</span></h4>
\t </li>
\t </ul>
\t </div>
\t <div class="tab-pane" id="c">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
\t <div class="tab-pane" id="d">Aliquam in felis sit amet augue.</div>
\t <div class="tab-pane" id="e">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
\t <div class="tab-pane" id="f">Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
\t </div><!-- /tab-content -->
\t </div><!-- /tabbable -->
\t </div><!-- /col -->
\t </div><!-- /row -->
\t </div><!-- /container -->
\t \t </div> <!--/tabs_item -->
\t \t
\t </div> <!--/tab_content -->
</div> <!--/tab -->
で試してみてください。 IDはページ全体で一意でなければなりません。同じIDを使用すると、これは競合し、予想される動作を取得しません。 – aavrug