<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>导航条</title>
<script type="text/javascript">
function change_bg(obj){
/* 获取-导航条>列表>列表项>a标签链接元素 */
var a=document.getElementById("nav_ul").getElementsByTagName("a");
/* 将所有a标签链接元素-类名清空 */
for(var i=0;i<a.length;i++){
a[i].className="";
}
/* 将类名赋值给选中状态的-导航条选项 */
obj.className="nav_li";
/* 之后类选择器生效 */
}
</script>
<style type="text/css">
body{
margin:0px auto;
}
/* 导航条 */
.div_nav{
background-color:#0F141B;
opacity:0.9;
width:"100%"
height:75px;
}
/* 列表-去除标记圆点 */
.div_nav ul{
list-style-type:none;
margin:0px;
padding:0px;
margin-left:150px;
}
/* 列表项-横向排列 */
.div_nav li{
display:inline;
}
/* 导航条-字符调整 */
.div_nav a{
font-size:32px;
line-height:75px;
text-decoration:none;
color:#FFFFE0;
padding:20px;
}
/* 导航条-鼠标悬浮 */
.div_nav a:hover{
background-color:black;
}
/* Menu1-选中状态 */
.nav_li{
background-color:black;
}
</style>
</head>
<body>
<div class="div_nav">
<ul id="nav_ul">
<li><a href="#" onclick="change_bg(this)" class="nav_li">Menu1</a></li>
<li><a href="#" onclick="change_bg(this)">Menu2</a></li>
<li><a href="#" onclick="change_bg(this)">Menu3</a></li>
<li><a href="#" onclick="change_bg(this)">Menu4</a></li>
<li><a href="#" onclick="change_bg(this)">Menu5</a></li>
</ul>
</div>
</body>
</html>
原文：js导航栏单击事件背景变换的示例代码
http://www.3lian.com/edu/2014/01-14/124021.html
时间： 2024-10-11 05:15:06