Example of jScrollPane and Tabs, almost working together

问题

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…

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;
});

});

回答1:

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

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

In your case you could try:

$("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!)

来源：https://stackoverflow.com/questions/4273634/example-of-jscrollpane-and-tabs-almost-working-together

标签

tabs

jscrollpane

jquery