1

我正在使用Nicescroll在引导选项卡上显示滚动条。

虽然它显示滚动条，但如果我们在多个选项卡上初始化 nicescroll，非活动选项卡的滚动条也始终可见。

这个小提琴是这个问题的娱乐：http: //jsfiddle.net/LittleLebowski/B86me/15/ 这是代码： HTML代码

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">
      <div class="scroller" data-height="150px">
          <p>Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambra</p><br><br><p>y. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim singl</p><br><br><p>e-origin coffee viral.
          </p></div>
    </div>

  <div class="tab-pane" id="profile">
       <div class="scroller" data-height="150px">
           <p>In July 1978, Post-Newsweek exchanged WTOP-TV with the Evening News Association's WWJ-TV (now WDIV-TV) in Detroit. Upon completion of the swap, WTOP-TV changed its ca</p><br><br><p>ll letters to WDVM-TV, with the new call letters representing the initials of the areas which channel 9 serves: District of Columbia, Virginia and Maryland. Post-Newsweek parent The Washington Post Company, and the Evening News Association, which publi</p><p>shed the Detroit News, decided to swap their stations for fear that the FCC would force them to sell the stations at unfavorable terms or revoke their very valuable </p><br><br><p>licenses because the FCC at the time was considering forbidding ownership of newspapers and broadcast stations in the same market</p>
      </div>
      </div>
</div>

JS代码

$(document).ready(
    function() {
        $('.scroller').each(function () {
            $(this).height($(this).attr("data-height"));
            $(this).niceScroll({
                cursorwidth: '7px',
                cursorcolor: '#A1B2BD',
                cursoropacitymax: 0.6,
                autohidemode: false 
            });
        });
    }
  );

如何仅在活动选项卡上显示滚动条。

请指导我。:(

4

3 回答 3

1

我已经用这段代码在我的网站上解决了这个问题。

JS

<script>
         $(document).ready(function() {
                $('a[data-toggle="tab"]').click(function () {
           $(this).closest('.panel').find('.panel-body').niceScroll({
                        cursorcolor: "#2f6098",
                        cursorwidth: 10,
                        cursoropacitymin: 0.7
                    });

           if($(this).attr('aria-controls') == 'profile'){
            $(this).closest('.panel').find('.panel-body').getNiceScroll().show();
           }else{
            $(this).closest('.panel').find('.panel-body').getNiceScroll().hide();
           }
                })
            });
    </script>
于 2015-03-15T17:03:25.130 回答
1

使用 Bootstrap 3 选项卡

HTML 标记

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">...</div>
  <div role="tabpanel" class="tab-pane" id="profile">...</div>
  <div role="tabpanel" class="tab-pane" id="messages">...</div>
  <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

JS

<script>
  $(document).ready(function() {
      $('a[data-toggle="tab"]').click(function () {
          $("tab-pane").getNiceScroll().hide();

          $($(this).attr('href')).find("tab-pane").niceScroll({
              cursorcolor: "#2f6098",
              cursorwidth: 10,
              cursoropacitymin: 0.7
          });

          $($(this).attr('href')).find("tab-pane").getNiceScroll().show();
      })

      $('#home').find("tab-pane").niceScroll({
          cursorcolor: "#2f6098",
          cursorwidth: 10,
          cursoropacitymin: 0.7
      });
  });
</script>
于 2014-10-30T01:22:07.840 回答
0

我已经用这段代码在我的网站上解决了这个问题。但是如何将此代码用作插件，因为我在所有网页中都遇到了问题。

 $('body').on('click','[data-toggle="tab"]',function(){
     $(".scroll").getNiceScroll().hide();
                  $($(this).attr('href')).find(".scroll").getNiceScroll().show();
 });
于 2015-07-03T04:34:41.137 回答