您的位置：首页 > Web前端 > JQuery

Jquery实现对a标签改变选中的背景色支持多选再次点击背景色消失

2012-10-29 10:30 309 查看

<!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">
<head>
<title></title>
<style type="text/css">
.lanse
{
background-color: Blue;
}
.baise
{
background-color:White;
}
</style>
<script src="../Js/jquery-last.js" type="text/javascript"></script>
<script type="text/javascript">
function dqxuanzhong(hh, id) {
var a = $('#hid_msgdq').val();
// var newaa = a + id + ',';
var newaa = a;
var strs = new Array(); //定义一数组
strs = newaa.split(","); //字符分割
var newa = "";
var flag = true;
if (strs.length > 0) {
for (var i = 0; i < strs.length; i++) {
if (strs[i] != "") {
if (strs[i] == id) {
$('#' + hh).addClass("baise"); //点击后的颜色在这里改就好了
newa = newa + "";
flag = false;
}
else {
$('#dq_' + strs[i]).addClass("lanse");
newa = newa + strs[i] + ',';
}
}
}
if (flag) {
newa = newa + id + ',';
$('#dq_' + id).addClass("lanse");
$('#hid_msgdq').val(newa);
} else {
$('#hid_msgdq').val(newa);
}
} else {
$('#hid_msgdq').val(id + ',');
}
alert($('#hid_msgdq').val());
}
function msxuanzhong(o, id) {
var a = $('#hid_msgms').val();
// var newaa = a + id + ',';
var newaa = a;
var strs = new Array(); //定义一数组
strs = newaa.split(","); //字符分割
var newa = "";
var flag = true;
if (strs.length > 0) {
for (var i = 0; i < strs.length; i++) {
if (strs[i] != "") {
if (strs[i] == id) {
$('#' + o).addClass("baise"); //点击后的颜色在这里改就好了
newa = newa + "";
flag = false;
}
else {
$('#ms_' + strs[i]).addClass("lanse");
newa = newa + strs[i] + ',';
}
}
}
if (flag) {
newa = newa + id + ',';
$('#ms_' + id).addClass("lanse");
$('#hid_msgms').val(newa);
} else {
$('#hid_msgms').val(newa);
}
} else {
$('#hid_msgms').val(id + ',');
}
alert($('#hid_msgms').val());
}
</script>
</head>
<body>
<input type="hidden" id="hid_msgdq" value="" />
<input type="hidden" id="hid_msgms" value="" />
<div>
<a id="dq_1" href="javascript:dqxuanzhong('dq_1',1)">北京</a> <a id="dq_2" href="javascript:dqxuanzhong('dq_2',2)">
上海</a>
</div>
<div>
<a id="ms_3" href="javascript:msxuanzhong('ms_3',3)">美食</a> <a id="ms_4" href="javascript:msxuanzhong('ms_4',4)">
网购</a>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Jquery实现对a标签改变选中的背景色 支持多选 再次点击背景色消失

Jquery实现对a标签改变选中的背景色支持多选再次点击背景色消失