js点击导航栏使当前背景变色代码实例

不少的导航栏有这样的效果，当点击导航栏的栏目的时候，能够将当前改变当前栏目的背景色，并且同时只能有一个导航栏背景色是被修改的，这样可以有效的提高导航栏的辨识度，下面就通过代码实例介绍一下如何实现此功能。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" /> 
<title>51前端</title> 
<style type="text/css">
body{font-size:17px;}
.current{background:red;}
#container ul{list-style-type:none;}
#container ul li{
  float:left;
  margin-right:10px;
  width:100px;
  height:30px;
}
#container ul li a{
  text-decoration:none;
  color:#000;
  display:block;
  width:100px;
  height:30px;
  text-align:center;
  line-height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var menu=document.getElementById("menu");
  var as=menu.getElementsByTagName("a");
    
  for(var i=0;i<as.length;i++){
    as[i].onclick=function(){
      for(var i=0;i<as.length;i++){
        as[i].className = "";
      }
      this.className="current";
    }
  }
}
</script>
</head>
<body>
<div id="container">
  <ul id="menu">
    <li><a href="javascript:" class="current">51前端一</a></li>
    <li><a href="javascript:">51前端二</a></li>
    <li><a href="javascript:">51前端三</a></li>
    <li><a href="javascript:">51前端四</a></li>
    <li><a href="javascript:">51前端五</a></li>
  </ul>
</div>
</body>
</html>

代码描述：js点击导航栏背景变色。js点击导航栏使当前背景变色代码实例

下载全部收藏

163 217

用户评论

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