前言

今天写模版的时候,新添加了一个店面预览的,需要一个选项卡 来选择代码如下 非常的简易易懂

html部分

        <ul class="page_tit">
            <li class="click"><a> red</a></li>
            <li>blue</li>
            <li>yellow</li>
        </ul>
      
        <div class="box">
            <div class="show">1</div>
            <div>2</div>
            <div>3</div>
        </div>

css部分写的随便的写了写


        ul li{
       display: inline-block;
    width: 136px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border: 1px solid #e7e3e2;
    font-size: 16px;
    color: #999;
        }
    
        .box{
            position: relative;
        }
        .box div{
            width: 304px;
            height: 300px;
            position: absolute;
            display: none;
        }
        .box .show{
            display: block;
        }
        .box .hide{
            display: none;
        }
        .click{
            background-color: #ccc;
        }

jq部分,别忘记调用jq文件,这里推荐七牛云的公共cdn


$(".page_tit li").each(function  (index , ele) {//each循环遍历。得到所有的li  index代表li的下表,ele元素
    $(this).click(function () {//$(this) 表示当前点击的元素
        $(this).addClass("click");
        $(this).siblings().removeClass("click");
        $(".box div:eq("+index+")").css({"display":"block"}); //eq  根据each循环得出index的所引值  取对应的div显示
        $(".box div:eq("+index+")").siblings().css({"display":"none"}); //对应的div隐藏
    });
    
});

这样简单的jq选项卡就好了(忽视ui有点丑)
文件预览地址

最后修改:2020 年 12 月 10 日
如果觉得我的文章对你有用,请随意赞赏