web前端-导航条

HTML代码：

 

<div id="nav">
    <ul>
        <li class="change"><a href="#">首页</a></li>
        <li><a href="#">我要买车</a></li>
        <li><a href="#">我要卖车</a></li>
        <li><a href="#">服务保障</a></li>
        <li><a href="#">门店查询</a></li>
    </ul>
    <div>

CSS代码：

 

 

#nav ul{
    width:510px;
    height:58px;
    margin-left:70px;
}
#nav ul li{
    list-style-type:none;
    float:left;
    width:100px;
}
#nav ul li a{
    display:block;
    cursor:pointer;
    width:100px;
    color:black;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
    line-height:58px;
    font-family:"隶书";
}

#nav ul li a:hover{
    color:#e64346;
}
#nav .change a{
    color:#e64346;
}

jQuery：

 

 

$("#nav ul li").click(function(){
   $("#nav ul li").eq($(this).index()).addClass("change").siblings().removeClass("change");
})