Operlapping Nicescroll scrolbars in Bootstrap tabs
因为我的tab是指定id的
<!-- Nav tabs --> <ul class="nav nav-tabs" id="vtTab" role="tablist"> <li role="presentation" class="active"><a href="#aero" aria-controls="aero" role="tab" data-toggle="tab">Test1</a></li> <li role="presentation"><a href="#musc" aria-controls="musc" role="tab" data-toggle="tab">Test2</a></li> <li role="presentation"><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab">Test3</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="aero"> <div id="aero_content"></div> </div> <div role="tabpanel" class="tab-pane" id="musc"> <div id="musc_content"></div> </div> <div role="tabpanel" class="tab-pane" id="daily"> <div id="daily_content"></div> </div> </div>
JS:
//滚动条 $("#aero,#musc,#daily").niceScroll({ touchbehavior:false, cursor6, cursorborder:"0px", cursorborderradius:"15px", background:"rgba(255,255,255,0)", autohidemode:"true" }); // hw acceleration enabled when using wrapper
1 $('#vtTab a').click(function (e) { 2 e.preventDefault() 3 $(this).tab('show'); 4 //切换滚动条 5 $("#aero,#musc,#daily").getNiceScroll().hide(); 6 switch (index){ 7 case 0: 8 $("#aero").getNiceScroll().show(); 9 break; 10 case 1: 11 $("#musc").getNiceScroll().show(); 12 break; 13 case 2: 14 $("#daily").getNiceScroll().show(); 15 break; 16 } 17 18 })