jq 版的tab切换

Posted 2020-08-20

ta切换是在前端中非常常见的一种效果，网上的效果很多。但是我觉得下面这种方法最好，把tab效果封装成一个函数 tabs，这个函数要配合jq使用。

var tabs = function (tab, con) {
    tab.click(function () {
        var index = tab.index(this);
        tab.removeClass(‘active‘);
        $(this).addClass(‘active‘);
        con.hide();
        con.eq(index).show();
    })
};

下面是调用这个函数。

tabs($("#tab-li li"), $(‘#tab-content .main‘));

函数里面的active是tab导航栏中需要变话的样式。