jquery 改变颜色问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 改变颜色问题相关的知识，希望对你有一定的参考价值。
<ul>
<li><a id="a" onclick="a('a');">1111111111111111111111111111</a></li>
<li><a id="b" onclick="a('b');">2222222222222222222222222222</a></li>
<li><a id="c" onclick="a('c');">3222222222222222222222222222</a></li>
</ul>
怎么能让点击a连接后b、c连接无背景色 同理点击b或者c后 其他连接无背景色
首先是触发事件，这个可以有也可以没有，如果有触发事件比如点击按钮才会触发，如果没有，那么页面加载之后自动就会改变颜色
然后就是通过JQ改变颜色，那么必须先获取这个元素，可以通过class、id、标签名称（当然这3个是常用的，还有非常多的选择方式），：比如$('.btn')、$('#btn')、$('div');
实现语句就是$('.btn').css('color','#777'),这段代码的意思就是class为btn的元素字体颜色改为#777. 参考技术A 给你个例子，跟你的要求不太一样，不过你可以按照我的改一下，给你代码，跑一下吧：
<html>
<head>
<script type="text/javascript" src=js/jquery.js></script>
<script type="text/javascript">
function changebg(id)
$("#a").css("background-color","white");
$("#b").css("background-color","white");
$("#c").css("background-color","white");
$("#"+id).css("background-color","red");
</script>
</head>
<body>
<ul>
<li><a id="a" onclick="changebg('a');">1111111111111111111111111111</a></li>
<li><a id="b" onclick="changebg('b');">2222222222222222222222222222</a></li>
<li><a id="c" onclick="changebg('c');">3222222222222222222222222222</a></li>
</ul>
</body>
</html>本回答被提问者采纳 参考技术B $("ul li a").click(function()
$(this).css("background-color","#123456").closest("li").siblings().find("a").css("background-color","#FFF");
);
其中，#123456是你要的背景颜色，#FFF是你默认的颜色，ul上最好加个id，用id选择器控制
jquery背景颜色改变焦点和模糊
【中文标题】jquery背景颜色改变焦点和模糊【英文标题】：jquery background-color change on focus and blur 【发布时间】：2011-07-20 20:29:14 【问题描述】：我有以下问题：我有一个包含三个文本输入字段的表单，我想在其中一个字段获得焦点时更改背景颜色，并在失去焦点时将其设置回来。我想出了以下代码：
HTML（简体）：
<form>
<input class="calc_input" type="text" name="start_date" id="start_date" />
<input class="calc_input" type="text" name="end_date" id="end_date" />
<input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" />
</form>
jQuery
$(document).ready(function()
$('input:text').focus(
function()
$(this).css('background-color' : '#FFFFEEE');
);
$('input:text').blur(
function()
$(this).css('background-color' : '#DFD8D1');
);
);
谢谢
【问题讨论】：
您还没有描述执行此代码时发生的情况。究竟是什么问题？ 你没有说你想出的代码有什么问题。 【参考方案1】：您尝试做的事情可以简化为这一点。
$('input:text').bind('focus blur', function()
$(this).toggleClass('red');
);input
background:#FFFFEE;
.red
background-color:red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input class="calc_input" type="text" name="start_date" id="start_date" />
<input class="calc_input" type="text" name="end_date" id="end_date" />
<input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" />
</form>【讨论】：
【参考方案2】：测试代码：
$("input").css("background","red");
完成：
$('input:text').focus(function ()
$(this).css( 'background': 'Black' );
);
$('input:text').blur(function ()
$(this).css( 'background': 'red' );
);
测试版本： jquery-1.9.1.js jquery-ui-1.10.3.js
【讨论】：
这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。 感谢内吉。我确实为我的工作构建了 js 框架。昨天我有类似的问题。当我看到这个页面首先导致我在谷歌的问题时，我想我的解决方案在这里其他有类似问题的程序员可以很容易地得到解决方案。我的问题是：运行焦点事件时无法使用 jquery 更改“输入：文本”背景颜色。【参考方案3】：代码中应该有逗号","不是冒号":"
代码必须是$(this).css('background-color' , '#FFFFEE');
希望对你有帮助。
问候 萨利哈
【讨论】：
【参考方案4】：更简单，只需 CSS 即可解决问题：
input[type="text"], input[type="password"], textarea, select
width: 200px;
border: 1px solid;
border-color: #C0C0C0 #E4E4E4 #E4E4E4 #C0C0C0;
background: #FFF;
padding: 8px 5px;
font: 16px Arial, Tahoma, Helvetica, sans-serif;
-moz-box-shadow: 0 0 5px #C0C0C0;
-moz-border-radius: 5px;
-webkit-box-shadow: 0 0 5px #C0C0C0;
-webkit-border-radius: 5px;
box-shadow: 0 0 5px #C0C0C0;
border-radius: 5px;
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus
border-color: #B6D5F7 #B6D5F7 #B6D5F7 #B6D5F7;
outline: none;
-moz-box-shadow: 0 0 10px #B6D5F7;
-webkit-box-shadow: 0 0 10px #B6D5F7;
box-shadow: 0 0 10px #B6D5F7;
【讨论】：
【参考方案5】：#FFFFEEE 不是正确的颜色代码。请改用#FFFFEE。
【讨论】：
对不起，我还没有打算发送它。问题是模糊有效，焦点无效。 @Argo：那是因为您在焦点事件处理程序的背景颜色样式中设置了非法值。以上是关于jquery 改变颜色问题的主要内容，如果未能解决你的问题，请参考以下文章