Javascript 在引导选项卡中滚动scrolbars
我正在使用在引导选项卡上显示滚动条 当它显示滚动条时,如果我们在多个选项卡上滚动,非活动选项卡上的滚动条也始终可见 这把小提琴是对这个问题的再创造: 代码如下: HTML代码Javascript 在引导选项卡中滚动scrolbars,javascript,twitter-bootstrap,tabs,twitter-bootstrap-3,nicescroll,Javascript,Twitter Bootstrap,Tabs,Twitter Bootstrap 3,Nicescroll,我正在使用在引导选项卡上显示滚动条 当它显示滚动条时,如果我们在多个选项卡上滚动,非活动选项卡上的滚动条也始终可见 这把小提琴是对这个问题的再创造: 代码如下: HTML代码 <!-- Nav tabs --> <ul class="nav nav-tabs"> <li><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#pro
<!-- 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>
$(document).ready(
function() {
$('.scroller').each(function () {
$(this).height($(this).attr("data-height"));
$(this).niceScroll({
cursorwidth: '7px',
cursorcolor: '#A1B2BD',
cursoropacitymax: 0.6,
autohidemode: false
});
});
}
);
如何仅在活动选项卡上显示滚动条
请引导我(带引导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>
$(文档).ready(函数(){
$('a[data toggle=“tab”]”)。单击(函数(){
$(“选项卡窗格”).getNiceSroll().hide();
$($(this.attr('href')).find(“选项卡窗格”).nicesroll({
光标颜色:“2f6098”,
游标宽度:10,
cursoropacitymin:0.7
});
$($(this.attr('href')).find(“选项卡窗格”).getNiceSoll().show();
})
$(“#主页”)。查找(“选项卡窗格”)。滚动({
光标颜色:“2f6098”,
游标宽度:10,
cursoropacitymin:0.7
});
});
我用这段代码在我的网站上解决了这个问题
JS
$(文档).ready(函数(){
$('a[data toggle=“tab”]”)。单击(函数(){
$(this).最近的('.panel').find('.panel body').nicesroll({
光标颜色:“2f6098”,
游标宽度:10,
cursoropacitymin:0.7
});
if($(this.attr('aria-controls')=='profile'){
$(this).closest('.panel').find('.panel body').getNiceSoll().show();
}否则{
$(this).closest('.panel').find('.panel body').getNiceSoll().hide();
}
})
});
我已经用这段代码在我的网站上解决了这个问题。但如何将这段代码用作插件,因为我在所有网页上都遇到了这个问题
$('body').on('click','[data-toggle="tab"]',function(){
$(".scroll").getNiceScroll().hide();
$($(this).attr('href')).find(".scroll").getNiceScroll().show();
});
同样的问题,你找到解决办法了吗?
$('body').on('click','[data-toggle="tab"]',function(){
$(".scroll").getNiceScroll().hide();
$($(this).attr('href')).find(".scroll").getNiceScroll().show();
});