jq超级简易选项卡案例

小唐同学.

发布于 2023-10-13 08:39:39

1400

发布于 2023-10-13 08:39:39

文章被收录于专栏：CMS建站教程CMS建站教程

前言

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

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

$(".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，如有侵权请联系 cloudcommunity@tencent.com 删除

click