jq超级简易选项卡案例

前言

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

html部分

代码语言：javascript复制

        <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部分写的随便的写了写

代码语言：javascript复制

        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文件

代码语言：javascript复制

$(".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有点丑）

click display jq 遍历 七牛云

0 人点赞