jquery 菜单导航切换

没事自己写点前端实现的菜单导航切换代码陶冶情操，代码放在以html语言基础上的语言直接运行，样式自己调节即可。

1.首先引入jquery架包

2.代码附上：

2.1html标签：

<!-- 头部 -->
<div class="head">
　　<li>首页</li>
　　<li>导航1</li>
　　<li>导航2</li>
　　<li>导航3</li>
　　<li>导航4</li>
</div>

<!-- 中部 -->
<div class="center">
　　<div class="center_float">
　　　　<li>对应0</li>
　　　　<li>对应2</li>
　　　　<li>对应3</li>
　　</div>
　　<div class="center_float">
　　　　<li>对应1</li>
　　　　<li>对应5</li>
　　　　<li>对应6</li>
　　</div>
　　<div class="center_float">
　　　　<li>对应2</li>
　　　　<li>对应5</li>
　　　　<li>对应6</li>
　　</div>
　　<div class="center_float">
　　　　<li>对应3</li>
　　　　<li>对应5</li>
　　　　<li>对应6</li>
　　</div>
　　<div class="center_float">
　　　　<li>对应4</li>
　　　　<li>对应5</li>
　　　　<li>对应6</li>
　　</div>
</div>

2.2 CSS样式：

.head{
　　width: 100%;
　　height: 50px;
　　border-bottom: 1px solid black;
}
.center{
　　width: 100%;
　　height: 93%;
}
.head li{
　　width: 60px;
　　height: 30px;
　　background-color: #eee;
　　margin: 0px 5px;
　　margin-top: 20px;
　　text-decoration: none;
　　list-style: none;
　　line-height: 30px;
　　text-align: center;
　　float: left;
}
.center_float{
　　width: 100%;
　　height: 30px;
　　background-color: red;
　　display: none;
}
.center_float li{
　　width: 50px;
　　height: 30px;
　　background-color: #eee;
　　margin: 0px 5px;
　　text-decoration: none;
　　list-style: none;
　　line-height: 30px;
　　text-align: center;
　　float: left;
}
.active{
　　display: block;
}
.head li.backcolor{
　　background-color: red;
}

2.3 js代码：

//导航切换
var isHover = false;
$(".head li").mouseover(function(){
　　isHover = true;
　　var index = $(this).index();
　　$(".head li").eq(index).addClass("backcolor").siblings().removeClass("backcolor");
　　$(".center .center_float").eq(index).addClass("active").siblings().removeClass("active");
}).mouseleave(function(){
　　setTimeout(function () {
　　　　if (isHover == false) {
　　　　　　$(".center .center_float").removeClass("active");
　　　　　　$(".head li").removeClass("backcolor");
　　　　}
　　}, 50);
});
$(".center .center_float").mouseover(function(){
　　isHover = true;
　　$(this).addClass("active").siblings().removeClass("active");
}).mouseleave(function () {
　　isHover = false;
　　$(".head li").removeClass("backcolor");
　　$(this).removeClass("active");
});

运行的效果如下：

jquery 菜单导航切换

原文：http://www.cnblogs.com/df-blog/p/6490699.html