Как вращать вкладки
Я подписался еще так извините за такой простой вопрос!
Я хочу, чтобы вкладки автоматически переключались каждые 5 секунд, например, как это реализовать?
мой код:
HTML-код:
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">first</a></li>
<li><a href="#tab2">second</a></li>
<li><a href="#tab3">third</a></li>
<li><a href="#tab4">fourth</a></li>
<li><a href="#tab5">fifth</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<img src="first.jpg" alt="" />
</div>
<div id="tab2" class="tab">
<img src="second.jpg" alt="" />
</div>
<div id="tab3" class="tab">
<img src="third.jpg" alt="" />
</div>
<div id="tab4" class="tab">
<img src="fourth.jpg" alt="" />
</div>
<div id="tab5" class="tab">
<img src="fifth.jpg" alt="" />
</div>
</div>
</div>
JS код:
$('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
заранее спасибо!
1 ответ
Решение
Возможно что-то вроде:
var current_tab = 1;
var number_of_tabs = 5;
window.setInterval(function(){
if(current_tab == number_of_tabs){
current_tab = 1;
}else{
current_tab++;
}
$('#tab'+current_tab).show().siblings().hide();
$('#tab'+current_tab).parent('li').addClass('active').siblings().removeClass('active');
}, 5000);
Скрипка: http://jsfiddle.net/Ve4sg/1/