zoukankan      html  css  js  c++  java
  • [记录] nicescroll 在bootstrap tabs中工作

    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     })
  • 相关阅读:
    1.2 软件测试的分类和职业生涯
    1.1:软件测试的发展
    1,select查询详解
    7、网页
    6、开学典礼
    5、边框属性和display
    4、盒子模型和margin、padding
    3、字体、背景、和文本的属性
    2、Css中的样式选择器
    16. C# 对象初始化器
  • 原文地址:https://www.cnblogs.com/fsong/p/5036276.html
Copyright © 2011-2022 走看看