Я хочу, чтобы вкладки Bootstrap Twitter изменялись по временной последовательности. Я использую их как карусель. Я бы хотел, чтобы вкладки менялись на следующие каждые 10 секунд.
Вот пример: http://library.buffalo.edu
Нажмите, чтобы узнать, что я имею в виду. Любая помощь будет оценена.
Что-то вроде этого создаст бесконечную петлю карусели; он будет циклически перемещаться по всем вкладкам и возвращаться к первому после того, как он достигнет последнего (измените #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.
Теперь, если вы хотите добавить логику в паузу или reset интервал, когда пользователь либо наводит на себя, либо вручную щелкает вкладку, которую нужно добавить отдельно, и вы бы использовали clearInterval(tabCarousel), чтобы остановить циклическую.
Вот базовая демонстрация:
Исправлено решение 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);
});
});
Еще один приятный вариант - приостановить слайд-шоу при нажатии на вкладку:
// 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);
});
один способ улавливания события наведения. это действительно зависит от того, какой элемент вы пытаетесь поймать, чтобы остановить велоспорт. вкладки или содержимое вкладки. это перехватывает вкладки.
$('.tabbable .nav-tabs > li').hover(function(){
clearInterval(tabCarousel);
});
Я добавил часы к коду Pallab. Таким образом, даже если щелкнуть разные вкладки до периода таймаута, который составляет 10 секунд в моем случае, текущая вкладка будет отображаться в течение 10 секунд, а вкладки будут автоматически вставляться через 5 секунд. Я новичок, поэтому, пожалуйста, несите мою кодировку.
Вам нужно щелкнуть 2 или более вкладки, по одной вкладке за раз, менее чем за 10 секунд
// 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);
});
})
Пользователь управления часто нажимает на navs вручную. Вот fiddle попытаться нажать несколько раз на 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" 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>