jquery快速实现一个tab切换

来源:赵克立博客分类: HTML5 标签：--发布时间:2022-09-02 22:47:55最后更新:2022-09-02 22:47:55浏览:583

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/8741.html

更新时间：

2022-09-02 22:47:55

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

javascript

var itemList = $('.tab-item-block .tab-item');
var boxList = $('.tab-box-block .tab-box');
itemList.click(function () {
    var _t = this;
    itemList.removeClass('selected')
    $(this).addClass('selected');
    itemList.each(function (index, el) {
        if (_t === el) {
            boxList.removeClass('selected');
            boxList.eq(index).addClass('selected');
        }

    })
});

html

    <div class="tab-item-block">
        <div class="tab-item selected">1</div>
        <div class="tab-item">2</div>
        <div class="tab-item">3</div>
        <div class="tab-item">4</div>
    </div>
    <div class="tab-box-block">
     <div class="tab-box selected"></div>
     <div class="tab-box selected"></div>
     <div class="tab-box selected"></div>
     <div class="tab-box selected"></div>
    </div>