jQuery导航栏，点击切换颜色

1.写好静态页面

        

            

                
网站首页
                
公司简介
                
产品优势
                
公司新闻
                
在线订单
                
客户留言
                
联系我们
            
        
    

css样式

/*导航*/
.navBox{
    height: 48px;
    width: 100%;
    background-color: #319BF3;
}
.navBox .nav {
    height: 32px;
    padding: 8px 0 8px 130px;
}
.navBox .nav li{
    height: 32px;
    line-height: 32px;
    float: left;
}
.navBox .nav li a{
    text-align: center;
    height: 32px;
    line-height: 32px;
    color: #fff;
    float: left;
    padding: 0 30px 0 30px;
    text-decoration: none;
}
.navBox .nav li a:hover{
    height: 32px;
    line-height: 32px;
    background: #FF8C00;
}
.navBox .nav .active{
    height: 32px;
    line-height: 32px;
    background: #FF8C00;
}
.navBox .nav li span{
    width: 2px;
    height: 32px;
    float: right;
    display: inline-block;
    background: url("../images/icon/s_line.jpg")right no-repeat;
}

2.引入jQuery，然后写如下代码

完成效果图