码迷,mamicode.com
首页 > 其他好文 > 详细

[记录] nicescroll 在bootstrap tabs中工作

时间:2015-12-10 16:30:19      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

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,
        cursorwidth:6,
        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     })

 

[记录] nicescroll 在bootstrap tabs中工作

标签:

原文地址:http://www.cnblogs.com/fsong/p/5036276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!