jquery 简单实现选项卡功能 

<body>
<ul id="ul1">
    <li class="kk"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul id="ul2">
    <li class="red"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

　　

<style>
        body,h1,h2,h3,h4,h5,h6,p,a,img,input,ul,li,ol,dl,dt,dd,figure,figcaption{ padding:0; margin:0}
        *{ box-sizing:border-box;user-select: none;}
        header,footer,article,section,aside,nav,figure,figcaption,main,summary,details{ display:block;}
        ul,ol{ list-style:none;}
        img{ display:block; border:0}
        input{ outline:none;}
        body,html{ height:100%;}
        body{color:#000; font-family:"微软雅黑";}
        html{font-size:26.67vw;}
        a{ text-decoration:none; color:#000;}
        ::-webkit-scrollbar{
            display:none;
        }

        #ul2 .red{
            display: block;
        }
        #ul1 .kk{
            border-bottom: 10px solid orange;
        }
        #ul1{
            display: flex;
        }
        #ul1 li{
            width: 20%;
            height: 30px;
        }
        #ul1 li:nth-child(2n+1){
            background: #000;
        }
        #ul1 li:nth-child(2n){
            background: #cccccc;
        }

        #ul2 li{
            width:100%;
            height:100px;
            display: none;
        }
        #ul2 li:nth-child(2n){
            background: red;
        }
        #ul2 li:nth-child(2n+1){
            background: blue;
        }
    </style>

　　

<script>
$(document).ready(function(){
    var now = $("#ul2 li");
    $("#ul1 li").click(function(){
        var idx = $(this).index();
        $(now[idx]).addClass("red").siblings().removeClass("red");
        $(this).addClass("kk").siblings().removeClass("kk");
    })

})
</script>

　　

posted @ 2017-11-25 21:03  HaOnBaby  阅读(179)  评论(0)    收藏  举报