please tell me how to make tabs inside tabs in this code?
$('.tabs-box').each(function(){ $(this).find('.tabs-sel span:first').addClass('current'); $(this).find('.tabs-b:first').addClass('visible'); }); $('.tabs-sel').delegate('span:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('.tabs-box').find('.tabs-b').hide().eq($(this).index()).fadeIn(400); });
.tabs-b {display:none;} .tabs-b.visible {display:block;} .tabs-sel {padding:20px 0 0 20px;} .tabs-sel span {display:inline-block; padding:10px 20px; vertical-align:top; cursor:pointer;} .tabs-sel span.current {background-color:#4e647a;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabs-box"> <div class="tabs-sel"><span class="current">1</span><span>2</span><span>3</span></div> <div class="tabs-b visible">12</div> <div class="tabs-b">13</div> <div class="tabs-b">14</div> </div>
Try something like this in one of the sub tabs:
<div class="tabs-b visible">
<div class="tabs-sel">
<span class="current">12</span>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.