js点击后换class

JavaScript013

js点击后换class,第1张

//简单的状态模式

<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>