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 fir开发者_JS百科st 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;
});
});
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!)
精彩评论