jquery选项卡

效果如下：

html部分

<div id="box" class="box">
        <div class="thead">
            <h2>选项卡</h2>
            <ul class="tab0">
                <li class="index"><span>标题一</span></li>
                <li><span>标题二</span></li>
                <li><span>标题三</span></li>
                <li><span>标题四</span></li>
            </ul>
        </div>
        <div class="tbody">
            <div class="block"><img src="2018a.png" alt=""></div>
            <div class="none"><img src="2018b.png" alt=""></div>
            <div class="none"><img src="2018c.png" alt=""></div>
            <div class="none"><img src="2018d.png" alt=""></div>
        </div>
 </div>

结构分为两部分

第一部分是选择点击的按钮部分

第二部分是被选择后所显示的内容的部分

　　由于要逐一显示，所以就使用display：none；隐藏。

 

css部分

        * {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 758px;
            height: 32px;
            margin: 15px auto;
        }
        .thead ul {
            float: right;
            list-style-type: none;
            line-height: 32px;
            height: 32px;
        }
        .thead ul li {
            float: left;
            height: 32px;
            width: 122px;
            color: #fff;
            text-align: center;
            margin: 0 5px;
            cursor: pointer;
            background: #666;
        }
        .none {
            display: none;
        }
        .block {
            display: block;
        }
        .index {
            color: #fff;
            background: #bc241a;
            font-weight: 400;
        }
        .tbody {
            width: 100%;
        } 
        .tbody img {
            border-radius: 5px;
            border: 1px solid #ccc;
            width: 100%;
        }

关于这部分，其实最大的问题就是尺寸的问题，即便想嫁接，也会因尺寸不合而修改。

况且因效果图的不同，往往样式本身就得重新返工。

所以，这里只是个基本的样式表现。

 

jquery部分

 $(function(){
            tab();
        });
        function tab(){
            var obj = $("#box").find(".tab0>li");
            $(obj).click(function(){
                var id = $(obj).index(this);          
                $("#box").find(".tbody>div").removeClass().addClass("none");
                $("#box").find(".tbody>div:eq("+id+")").removeClass().addClass("block");
            });
        }

创建选项卡tab()函数

　　函数内第一行

　　　　先查找到选项卡点击的部分的所以li，

　　第二行到最后

　　　　给点击的当前li定义个变量，并获取当前编号。（从零开始）

　　　　然后先让所以的图片都隐藏

　　　　再利用之前选出的编号id，和eq()函数所选中的那个显示