javascript - Select element not working in CSS -
i write web page; have problem active element.
you can see know issues.
i don't know seems fail when tried click on second tab or third tab (it working first tab), , can't click child element tab.
can see 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 { 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: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 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 { 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 { 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 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 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 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 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 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 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 -->
try 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 { 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: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 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 { 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 { 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 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 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 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 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 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 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 -->
Comments
Post a Comment