<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>导航条</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
ul{
width:960px;
margin:0 auto;
background:orange;
overflow:hidden;
}
ul li{
float:left;
padding:10px 20px;
color:#fff;
font-weight:800;
}
.on{
background:#f00;
}
</style>
</head>
<body>
<ul>
<li onmouseout="cancel(this)">网站首页</li>
<li onmouseout="cancel(this)">产品分类</li>
<li onmouseout="cancel(this)">公司介绍</li>
<li onmouseout="cancel(this)">项目介绍</li>
<li onmouseout="cancel(this)">动态信息</li>
<li onmouseout="cancel(this)">在线留言</li>
</ul>
<script>
// 鼠标经过事件
function select(obj){
//给元素添加属性节点
var on = document.createAttribute('class');
//给属性节点赋值
on.value = 'on';
//给对应的元素添加属性
obj.attributes.setNamedItem(on);
//console.log(obj);
}
function cancel(obj){
//鼠标离开时删除class=on的属性
obj.attributes.removeNamedItem('class');
}
</script>
</body>
</html>
