Văn Lộc Văn Lộc - 2 months ago 14
HTML Question

Select element not working in CSS

I write the web page; I have the problem with

active element
.

You can see to know my issues.



I don't know it seems to fail when I tried to click on the second tab or third tab (it only working with the first tab), and I can't click another child element tab.

Can you see my 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 &nbsp; &nbsp;<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 &nbsp; &nbsp;<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 &nbsp; &nbsp;<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 &nbsp; &nbsp;<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 &nbsp; &nbsp;<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 &nbsp; &nbsp;<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 -->




Answer

Try with this 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 &nbsp; &nbsp;<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 &nbsp; &nbsp;<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 &nbsp; &nbsp;<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 &nbsp; &nbsp;<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 &nbsp; &nbsp;<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 &nbsp; &nbsp;<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 -->