jquery在点击时更改div的样式

时间:2011-05-23 11:47:38

标签: jquery css

我有一个div,具有特定的风格(让我们说某个背景)。

我想要的是,当点击具有该div的列表元素时,应用另一个特定样式(另一种背景类型)来应用于该div,

如果单击属于该div的其他元素中的另一个区域,则该样式不应更改。

是否可以使用jquery?谢谢!

编辑:(我的功能也会做一些其他的事情。但是改变的颜色不会像我想的那样工作。它会改变我点击的所有项目的背景,而不仅仅是最后点击的。)

$(document).ready(function() {
    $('.product_types > li').click(function() {
        $(this)
        .css('backgroundColor','#EE178C')
        .siblings()
        .css('backgroundColor','#ffffff');

        $('#submit_button').removeAttr('disabled');
        $('#number').removeAttr('disabled');
    });
});

4 个答案:

答案 0 :(得分:31)

正如我对你的问题所理解的那样,这就是你想要的。

以下是jsFiddle以下内容:

$('.childDiv').click(function() {
  $(this).parent().find('.childDiv').css('background-color', '#ffffff');
  $(this).css('background-color', '#ff0000');
});
.parentDiv {
  border: 1px solid black;
  padding: 10px;
  width: 80px;
  margin: 5px;
  display: relative;
}
.childDiv {
  border: 1px solid blue;
  height: 50px;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="divParent1" class="parentDiv">
  Group 1
  <div id="child1" class="childDiv">
    Child 1
  </div>
  <div id="child2" class="childDiv">
    Child 2
  </div>
</div>
<div id="divParent2" class="parentDiv">
  Group 2
  <div id="child1" class="childDiv">
    Child 1
  </div>
  <div id="child2" class="childDiv">
    Child 2
  </div>
</div>

答案 1 :(得分:4)

你可以使用jquery的.css方法..

参考css method

答案 2 :(得分:0)

$(document).ready(function() {
  $('#div_one').bind('click', function() {
    $('#div_two').addClass('large');
  });
});

如果我理解你的问题。

或者你可以直接修改css:

var $speech = $('div.speech');
var currentSize = $speech.css('fontSize');
$speech.css('fontSize', '10px');

答案 3 :(得分:0)

如果我理解正确,您希望通过单击ul列表中的项目来更改元素的CSS样式。我是对的吗?

HTML:

<div class="results" style="background-color:Red;">
</div>

 <ul class="colors-list">
     <li>Red</li>
     <li>Blue</li>
     <li>#ffee99</li>
 </ul>

jquery的

$('.colors-list li').click(function(e){
    var color = $(this).text();
    $('.results').css('background-color',color);
});

请注意,如果要使用类而不是内联样式,jquery可以使用addClassremoveClasstoggleClass。这意味着您可以执行以下操作:

$('.results').addClass('selected');

在CSS中定义“选定”样式。

工作示例: http://jsfiddle.net/uuJmP/