在Bootstrap选项卡中操作Nicescroll scrolbar
Operlapping Nicescroll scrolbars in Bootstrap tabs
我正在使用Nicescroll在引导选项卡上显示滚动条。
当它显示滚动条时,如果我们在多个选项卡上初始化nicewoll,非活动选项卡中的滚动条也始终可见。
这把小提琴是对这个问题的再现: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
});
});
}
);
如何仅在活动选项卡上显示滚动条。
请引导我。:(
使用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>
我用这段代码在我的网站上解决了这个问题。
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>
我用这段代码在我的网站上解决了这个问题。但是如何将此代码用作插件,bcoz我在所有网页中都遇到了问题。
$('body').on('click','[data-toggle="tab"]',function(){
$(".scroll").getNiceScroll().hide();
$($(this).attr('href')).find(".scroll").getNiceScroll().show();
});
相关文章:
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- 如何确定javascript已经完成了某些操作.ios上的
- 防止Alt+Shift默认操作或检测多种操作系统语言的Javascript
- 从JavaScript访问struts操作中的属性
- fluxxor向一个flux实例添加一组以上的操作
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 操作放置在画布上的元素之间的连接
- 使用“+="操作人员
- Rails操作只调用一次,但我在ajax中每秒钟都调用一次
- Jquery未定义函数正在停止其他操作
- 如何操作iframe之外的元素
- javascript对象操作:根据指定条件选择属性
- jQuery:暂停按钮可以暂停所有其他操作
- 用于选择/文本框操作的JavaScript
- Google 脚本:用于创建日历活动的脚本运行时不会出错,但不会执行任何操作
- 通过javascript操作图像,非常简单
- 将文本框中的值用于按钮窗体操作上的变量
- 当通过AJAX调用时,控制器操作不会执行
- 在Bootstrap选项卡中操作Nicescroll scrolbar