<html>
<head><title>updateClass</title>
<style type="text/css">
a{ padding:20pxtext-decoration:none}
.asc{ background-color:#CCCCCC}
.desc{ background-color:#999999}
.asc_enable{ background-color:#FF0000}
.desc_enable{ background-color:#00FF00}
</style>
<script type="text/javascript">
var index = "a2"//当前焦点的ID
var lastEnable = "a1"//上一次为焦点的ID
function updateClass(obj) {
if (obj.id != index) { //点击了非当前焦点的控件
obj.className = "asc_enable"//将当前焦点的控件设为红色
document.getElementById(lastEnable).className = "desc"//上一次为焦点的设为灰色
lastEnable = index//改变上一次的焦点
document.getElementById(index).className = "asc"//原先的当前焦点控件设为淡灰色
index = obj.id//改变当前焦点
} else {//点击了已经为焦点的控件
switch (obj.className) {//改变当前焦点控件的颜色
case "asc_enable":
obj.className = "desc_enable"
break
case "desc_enable":
obj.className = "asc_enable"
break
}
}
}
</script>
</head>
<body>
<div id="sort_top">
<a id="a1" class="asc" href="javascript:void(0)" onclick="updateClass(this)">1</a>
<a id="a2" class="asc_enable" href="javascript:void(0)" onclick="updateClass(this)">2</a>
<a id="a3" class="desc" href="javascript:void(0)" onclick="updateClass(this)">3</a>
<a id="a4" class="desc" href="javascript:void(0)" onclick="updateClass(this)">4</a>
</div>
</body>
</html>
//---------------
href="javascript:void(0)" 代表不执行默认操作，即页面跳转
onclick="updateClass(this)" -------this 代表当前标签控件对象，这里为A标签本身
css中的class 对应 js中的 className 属性
1、JavaScript允许你更改元素的class或id。当你更改之后，浏览器会自动更新元素的样式。
2、是className，可不是class
注意：JavaScript使用的是className去访问class属性，因为class是一个保留关键字，因为将来JavaScript可能开始支持像Java一样的类。
例子：
<!doctype html><html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
p {
color: #000000 /* black */
}
p.emphasis {
color: #cc0000 /* red */
}
</style>
</head>
<body>
<p id="test">Test</p>
<hr>
<input type="button" value="修改className为emphasis" onclick="document.getElementById('test').className = 'emphasis'"><br>
<input type="button" value="修改className为空" onclick="document.getElementById('test').className = ''"><br>
</body>
</html>
<script>var a=parseInt(10*Math.random())
document.getElementById("redban").className='banbg'+a
</script>
