Twitterのブートストラップタブを時系列で変更することを検討しています。カルーセルのように使っています。タブを10秒ごとに次のタブに変更したいのですが。
次に例を示します：http：//library.buffalo.edu
ニュース記事をクリックして、私が何を意味するかを確認してください。どんな助けでもいただければ幸いです。
質問する
13130 次
6 に答える
11
このようなものは、終わりのないカルーセルループを作成します。すべてのタブを循環し、最後のタブに到達すると最初のタブに戻り#yourTabWrapperます（タブのマークアップが含まれているものに適したセレクターに変更します）。
var tabCarousel = setInterval(function() {
var tabs = $('#yourTabWrapper .nav-tabs > li'),
active = tabs.filter('.active'),
next = active.next('li'),
toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
}, 3000);
私たちが行っているのは、アクティブなタブを見つけてclick、リストの次のタブでイベントをトリガーすることだけです。次のタブがない場合はclick、最初のタブでイベントをトリガーします。イベントは実際にはaではなく、でトリガーされることに注意してくださいli。
ここで、ユーザーがタブにカーソルを合わせるか手動でクリックしたときに間隔を一時停止またはリセットするロジックを追加する場合は、個別に追加する必要がありclearInterval(tabCarousel)、サイクリングを停止するために使用します。
基本的なデモは次のとおりです。
于 2012-08-17T15:07:12.970 に答える
8
AppSolソリューションを修正しました：
// Tab-Pane change function
var tabChange = function(){
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a');
// Use the Bootsrap tab show method
next.tab('show')
}
// Tab Cycle function
var tabCycle = setInterval(tabChange, 5000)
// Tab click event handler
$(function(){
$('.nav-tabs a').click(function(e) {
e.preventDefault();
// Stop the cycle
clearInterval(tabCycle);
// Show the clicked tabs associated tab-pane
$(this).tab('show')
// Start the cycle again in a predefined amount of time
setTimeout(function(){
tabCycle = setInterval(tabChange, 5000)
}, 30000);
});
});
于 2013-11-11T11:30:04.193 に答える
4
もう1つの優れたオプションは、タブがクリックされたときにスライドショーを一時停止することです。
// Tab-Pane change function
var tabChange = function(){
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a');
// Use the Bootsrap tab show method
next.tab('show')
}
// Tab Cycle function
var tabCycle = setInterval(tabChange, 5000)
// Tab click event handler
$(this).find('.nav-tabs a').click(function(e) {
e.preventDefault();
// Stop the cycle
clearInterval(tabCycle);
// Show the clicked tabs associated tab-pane
$(this).tab('show')
// Start the cycle again in a predefined amount of time
setTimeout(function(){
tabCycle = setInterval(tabChange, 5000);
}, 15000);
});
于 2013-04-03T11:12:34.277 に答える
1
ホバーイベントをキャッチする1つの方法。それは本当にサイクリングを止めるためにあなたが捕まえようとしている要素に依存します。タブまたはタブの内容。これはタブにフックします。
$('.tabbable .nav-tabs > li').hover(function(){
clearInterval(tabCarousel);
});
于 2012-09-18T17:28:46.913 に答える
0
Pallabのコードに時計を追加しました。そのため、タイムアウト期間（私の場合は10秒）の前に別のタブがクリックされた場合でも、現在のタブは10秒間表示され、タブは5秒後に自動的にタブになります。私は初心者ですので、コーディングにご容赦ください。
10秒以内に、一度に1つのタブで2つ以上のタブをクリックする必要があります
// Tab-Pane change function
tabChange = function(){
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a');
// Use the Bootsrap tab show method
next.tab('show');
} // Tab Cycle function
function settabchnge () {
//alert("in set tab");
tabCycle = setInterval(tabChange, 5000);
}
settabchnge();
function cleartabchange () {
clearInterval(tabCycle);
}
$(function(){
var counterofclock = 1;
var counterofmoreclicks = 1;
var clicked = false;
var sec = 0;
function startClock() {
if (clicked === false) {
clock = setInterval(stopWatch, 1000);
clicked = true;
}else if (clicked === true) {
}
}
function stopWatch() {
sec++;
}
function stopClock() {
window.clearInterval(clock);
sec = 0;
clicked = false;
}
$('.nav-tabs a').click(function(e) {
if(counterofclock === 1){
startClock();
counterofclock = 2;
}else {
stopClock();
startClock();
}
e.preventDefault();
// Stop the cycle
if (counterofmoreclicks == 2 && sec < 11){
clearTimeout(starttabchnage);
}
counterofmoreclicks = 2;
clearInterval(tabCycle);
// Show the clicked tabs associated tab-pane
$(this).tab('show')
// Start the cycle again in a predefined amount of time
starttabchnage = setTimeout(function(){ settabchnge();}, 10000);
});
})
于 2014-06-29T09:25:04.297 に答える
0
コントロールユーザーは頻繁にnavsを手動でクリックします。これは、navsを複数回クリックしようとするフィドルです。
// Tab Cycle function
var tabCycle = setInterval(tabChange, 5000)
// Tab click event handler
$(function(){
$('.nav-tabs a').click(function(e) {
e.preventDefault();
// Stop the cycle
clearInterval(tabCycle);
// Start the cycle again in a predefined amount of time
$(this).tab('show')
setTimeout(function(){
// Stop the cycle here too because if user clicked on tabs frequently then setTimeout function called too manny time
clearInterval(tabCycle);
tabCycle = setInterval(tabChange, 5000)
}, 15000);
});
});
// Tab-Pane change function
var tabChange = function(){
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a');
next.tab('show')
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills nav-tabs nav-stacked">
<li class="active"><a href="#t1">Home</a></li>
<li><a href="#t2">Menu 1</a></li>
<li><a href="#t3">Menu 2</a></li>
<li><a href="#t4">Menu 3</a></li>
</ul>于 2018-02-16T05:41:26.583 に答える