没事自己写点前端实现的菜单导航切换代码陶冶情操，代码放在以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");
});
运行的效果如下：