Tab 切换效果

Posted 2020-07-20 元仔

今天写的两个小效果都是为了测试我写的单参函数，结果还是有点成功的~~此处是不是想发表情包！

Tab效果很简单，这里我就不赘述了，直接上代码：

html代码：

<div class="content">
    <div class="tab1 cf">
        <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ul>
    </div>
    <div class="tab2 cf">
        <div>1111第一项内容</div>
        <div>2222第二项内容</div>
        <div>3333第三项内容</div>
    </div>
</div>

css代码：

.tab1 li{
        float: left;
        width: 98px;
        border:1px solid #f00;
        display: inline-block;
        height: 50px;
    }
.tab2 div{
        border:1px solid #f00;
        width: 300px;
        height: 100px;
    }

js代码：

function tabSwitch(tab){
        var tabBox=tab;
        var tab1Li=tabBox.find(".tab1 li");
        var tab2Div=tabBox.find(".tab2 div");
        tab2Div.hide();
        tabBox.find(".tab1 li:first-child").css("background","#FABB3E");
        tabBox.find(".tab2 div:first-child").show();
        tab1Li.click(function(){
            var index=$(this).index();
            $(this).css("background","#FABB3E").siblings().css("background","#fff");
            tab2Div.eq(index).show().siblings().hide();
        });
        return false;
    }
    tabSwitch($(".content"));//调用tabSwitch函数

好啦，这个就可以多次调用啦~

效果图！！

这么丑大家就不要欣赏了，这个博文也主要不是突出样式的，大家可以根据自己喜欢去改css就好啦！