<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 属性
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>HTML5学堂</title>
</head>
<body>
<div id="h5course" class="h5course-cn">学习HTML5，到HTML5学堂-h5course-com</div>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
var h5course = document.getElementById('h5course')
// 修改类名
h5course.className = 'h5course-com'
</script>
</body>
</html>
