jq超级简易选项卡案例

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

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;
        }

$(".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隐藏
    });
});