<!DOCTYPE html>
<html>
<head>
<title>userInformation.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style type="text/css">
.hq_hy:hover, .hq_zsh:hover, .hq_hb:hover, .hq_jyyc:hover, .hq_byb:hover, .hq_lrcl:hover//鼠标移上去变色(不点击)
{
color: #fff;
border-color: #b1b0b0;
background: #b1b0b0;
border: none;
}
.start
{
cursor: pointer;//改变鼠标样式为手指
}
.end
{
cursor: pointer;//改变鼠标样式为手指
color: #fff;
background: #b1b0b0;
border: none;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input class="flag hq_hy" type="submit" onclick="dj(this);" value="第一个" />
</td>
<td>
<input class="flag hq_zsh" type="submit" onclick="dj(this);" value="第二个" />
</td>
<td>
<input class="flag hq_hb" type="submit" onclick="dj(this);" value="第三个" />
</td>
<td>
<input class="flag hq_jyyc" type="submit" onclick="dj(this);" value="第四个" />
</td>
<td>
<input class="flag hq_byb" type="submit" onclick="dj(this);" value="第五个" />
</td>
<td>
<input class="flag hq_lrcl" type="submit" style="" onclick="dj(this);" value="第六个"
/>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function () {
//加载事件
var collection = $(".flag");
$.each(collection, function () {
$(this).addClass("start");
});
});
//单击事件
function dj(dom) {
var collection = $(".flag");
$.each(collection, function () {
$(this).removeClass("end");
// $(this).addClass("start");
});
// $(dom).removeClass("start");
$(dom).addClass("end");
}
</script>
</html>
点击按钮比变色,点击其他变色,其他恢复默认($.each()函数增加CSS,移除CSS)
最新推荐文章于 2024-07-04 20:21:08 发布