jQuery选项卡禁用jQuery滚动

jQuery tab disable jQuery scroll

本文关键字：jQuery 滚动 选项      更新时间：2023-09-26

我使用jqueryUI选项卡，并希望在每个选项卡内实现一个平滑的滚动条。我尝试了几个可滚动的插件，如jQuery自定义内容滚动条，TinyScrollbar和现在的areaaperta nicesscroll，但每次我都遇到同样的问题-滚动条只在一个选项卡内工作。

    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
    <div id="tabs" style="width:900px; font-size:100%;">
    <ul>
        <li><a href="#tabs-1" >FIRST</a></li>
        <li><a href="#tabs-2">SECOND</a></li>
        <li><a href="#tabs-3">THIRD</a></li>
    </ul>
    <div id="tabs-1">
        <div id="thisdiv">
        <p><b>FIRST SCROLLABLE PARAGRAPH</b>...</p></div></div>
    <div id="tabs-2"><div id="thisdiv2">
        <p><b>SECOND SCROLLABLE PARAGRAPH</b>...</p>
    </div></div>
    <div id="tabs-3">
        <p>THIRD TAB </p>
    </div>
</div>
    <script>
    $(document).ready(
  function() {     
    $("#thisdiv").niceScroll({cursorcolor:"#00F"});
    $("#thisdiv2").niceScroll({cursorcolor:"#00F"});  }
);
    </script>

下面是jsfiddle，显示了在uittab和niceScroll插件的两个滚动条之间没有冲突:http://jsfiddle.net/Fluc/EhcqX/4/

这里我尝试使用相同的div与滚动条在每个选项卡:http://jsfiddle.net/Fluc/cJPT3/2/

正如你所看到的，scrollable只能在第一个选项卡内工作。与其他可滚动插头相同。

我不是jquery程序员，但感觉这个问题与某处的显示属性有关。

任何帮助将非常感激!

这个效果很好，试着告诉我。

<script>
$(document).ready(function() {
    $("#tabs").tabs();
    jQuery('#tabs').bind('tabsselect', function(event, ui) {    
        ui.tab 
        ui.panel
        ui.index
        if (ui.index==0) {
            $("#tabs-1 > .scrollable").niceScroll({cursorcolor:"#00F"});
        }else if (ui.index==1) {
            $("#tabs-2 > .scrollable").niceScroll({cursorcolor:"#00F"});
        }else if (ui.index==2) {
            $("#tabs-3 > .scrollable").niceScroll({cursorcolor:"#00F"});
        } 
  });
});
</script>

我也更新了你的小提琴http://jsfiddle.net/cJPT3/9/

相关文章：