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

代码如下:
   [ 其他 ] 运行代码    下载代码
<!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点击导航栏使当前背景变色代码实例



6 7



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 js导航菜单 js导航 js菜单 javascript导航菜单 javascript导航 javascript菜单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到