jQuery导航栏背景切换源码下载

一般情况下都要给导航栏做一些效果，以更为美观或者更人性化，切换导航栏的背景算是最简单的方案之一，下面就是一个简单的代码实例能够实现此功能，希望能够给需要的朋友带来一定的帮助。

代码如下:

[ jQuery ] 运行代码下载代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="https://www.51qianduan.com/" />
<title>导航栏背景切换代码实例-51前端</title>
<style>
.nav{
  height:40px;
  width:100%;
  background:#E6E6E6;
}
.nav ul li{
  float:left;
  list-style:none;
  margin-right:20px;
  line-height:40px;
}
.nav ul li a{
  text-decoration:none;
  display:block;
  width:100px;
  text-align:center;
  color:green;
}
.onNav{
  font-weight:bold;
  color:#fff;
  background:#ccc;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".nav ul li a").click(function(){
    var inx=$(this).parent("li").index();
    $(".nav ul li").find("a").removeClass("onNav"); 
    $(".nav ul li").eq(inx).find("a").addClass("onNav");
  }) 
})
</script>
</head>
<body>
<div class="nav">
  <ul>
    <li><a href="#" class="onNav">首页</a></li>
    <li><a href="#">51前端一</a></li>
    <li><a href="#">51前端二</a></li>
    <li><a href="#">51前端三</a></li>
    <li><a href="#">51前端四</a></li>
  </ul>
</div>
</body>
</html>

代码描述：jQuery导航栏背景切换。jQuery导航栏背景切换源码下载

下载全部收藏

120 160

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册