jScrollPane和Tabs的示例，几乎可以一起使用 [英] Example of jScrollPane and Tabs, almost working together

问题描述

我希望滚动条(来自jScrollPane)与每个选项卡一起出现(来自Soh Tanaka).当前，它显示在第一个选项卡上，但是又退回到浏览器默认的第二个，第三个，第四个选项卡上……

I would like the scroll bar (from jScrollPane) to show up with every tab (from Soh Tanaka). Currently, it shows up for the first tab, but it falls back to the browser default for the second, third, fourth tabs…

在此处查看我的实时示例: jScrollPane和Tabs几乎可以协同工作

See my live example here: jScrollPane and Tabs, almost working together

如何使滚动条显示在每个选项卡上?谢谢！

How can I get the scroll bar to display on every tab? Thanks!

<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function($) {
    jQuery('.scroll-pane').jScrollPane({
                verticalDragMinHeight: 20,
                verticalDragMaxHeight: 20,
                horizontalDragMinWidth: 20,
                horizontalDragMaxWidth: 20
    });

})；

<script type="text/javascript">
$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

})；

推荐答案

在显示每个标签后，您需要重新初始化jScrollPane.一个简单的例子在这里:

You need to re-initialise jScrollPane after you have shown each tab. A simple example here:

http://jscrollpane.kelvinluck.com/invisibles.html

您可以尝试以下方法:

$("ul.tabs li").click(function() {

    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn().jScrollPane(); //Fade in the active ID content and apply jScrollPane
    return false;
});

(我不知何故将此答案发布到

(I somehow posted this answer to the wrong question yesterday - so sorry for the delay in answering!)

这篇关于jScrollPane和Tabs的示例，几乎可以一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！