如何旋转标签

时间:2014-07-23 14:25:16

标签: javascript jquery html css tabs

我已经注册了,但很抱歉这么简单的问题!
我希望标签每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 code:

$('.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 个答案:

答案 0 :(得分:0)

也许是这样的:

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/