<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript導航條</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
ul{
width:973px;
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>
<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');//創建class屬性
on.value = 'on';//爲屬性賦值
obj.attributes.setNamedItem(on);//當鼠標經過誰的時候，就爲當前對象添加class屬性
}
//鼠標移出事件
function cancel(obj){
obj.attributes.removeNamedItem('class');
}
</script>
</body>
</html>