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     })
  • 相关阅读:
    MYCAT介绍
    MES生产日报存储过程
    HttpContext讲解
    负载均衡session共享问题
    UML学习(二)-----类图
    Hadoop实战第一篇
    网站速度优化的一般方法
    MVC中的ActionResult
    CCF201403-2 窗口(100分)
    CCF201403-2 窗口(100分)
  • 原文地址:https://www.cnblogs.com/fsong/p/5036276.html
Copyright © 2011-2022 走看看