<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<style type="text/css">
/** 鼠标经过样式 */
.tdover{
background-color: blue;
}
/** 鼠标移出样式 */
.tdout{
background-color: red;
}
</style>
<script type="text/javascript">
//鼠标经过时触发的事件
function mouseoverCss(obj){
var str = "flag"+obj;
if(document.getElementById(str).value==""){//判断对应隐藏表单是否为空
document.getElementById(obj).className="tdover";
}
}
//鼠标移出时触发的事件
function mouseoutCss(obj){
var str = "flag"+obj;
if(document.getElementById(str).value==""){//判断对应隐藏表单是否为空
document.getElementById(obj).className="tdout";
}
}
//点击事件
function onCss(obj){
var str = "flag"+obj;
document.getElementById(str).value="obj";//此次点击td对应隐藏表单赋值（不为空值即可）
/** 获取上一次点击td的id改变样式，同时清空对应隐藏表单值 */
var divId = document.getElementById('divId').value;
document.getElementById(divId).className="tdout";
str = "flag"+divId;
document.getElementById(str).value="";
/** 获取上此次点击td的id改变样式 */
document.getElementById('divId').value=obj;
document.getElementById(obj).className="tdover";
}
function innt(){
document.getElementById("divId").value="s2";
document.getElementById("flags2").value="obj";
document.getElementById("s2").className="tdover";
}
</script>
</head>
<body onload="innt()">
<table><input type="hidden" id="flagCss" value=""/><input type="hidden" id="divId"/>
<tr>
<td id="s1" class="tdout" width="200px;" onmouseover="mouseoverCss('s1')" onmouseout="mouseoutCss('s1')">
<a href="#" onclick="onCss('s1')">发生的地方</a><input type="hidden" id="flags1" value=""/>
</td>
</tr>
<tr>
<td id="s2" class="tdout" width="200px;" onmouseover="mouseoverCss('s2')" onmouseout="mouseoutCss('s2')">
<a href="#" onclick="onCss('s2')">发生的地方</a><input type="hidden" id="flags2" value=""/>
</td>
</tr>
<tr>
<td id="s3" class="tdout" width="200px;" onmouseover="mouseoverCss('s3')" onmouseout="mouseoutCss('s3')">
<a href="#" onclick="onCss('s3')">发生的地方</a><input type="hidden" id="flags3" value=""/>
</td>
</tr>
</table>
</body>
</html>
鼠标点击后，样式依然保留
4星 · 超过85%的资源 需积分: 32 72 浏览量
2012-07-12
11:21:56
上传
评论 2
收藏 1012B ZIP 举报 
鼠标点击后样式同鼠标移动样式相同.zip （1个子文件） 
test.htm 2KB资源评论
于小楼2012-12-18很好的资源，通过js控制css样式
xugang1092013-03-18好用，不多说，需要小修改
爱尚网络2013-06-23嗯 还行 不过稍微改动下
jianlong1922013-10-31还好，思路学习一下
