今天又学到了新知识代码在下面哦

HTML代码

<div id="main">

    <ul id="tabs">

        <li class="avlie">111</li>

        <li>222</li>

        <li>333</li>

        <li >444</li>

        <li>555</li>

    </ul>

    <div id="conter">

        <div style="display: block;">111</div>

        <div>222</div>

        <div>333</div>

        <div>444</div>

        <div>555</div>

    </div>

</div>

CSS样式

*{

    margin: 0px;

    padding: 0px;

}

#main{

    width: 300px;

    height: 350px;

    margin: auto;

    border: 1px solid red;

}

#tabs li{

    float: left;

    width: 60px;

    height: 50px;

    line-height: 50px;

    text-align: center;

    list-style-type: none;

    cursor: pointer;

}

#conter div{

    width: 300px;

    height: 300px;

    background-color: aqua;

    margin-top: 50px;

    display: none;

}

.avlie{background-color: pink;}

jQ代码

$('li').mouseover(function(){

    $(this).addClass('avlie').siblings().removeClass('avlie');              //siblings一个选择器，并且它作为第一个选择器的同辈

    $('#conter div').hide(10).eq($(this).index()).show(10);

})

                                               效果图