jquery更改div的样式点击

问题描述：

我有一个div，具有特定样式（假设某个背景）。jquery更改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'); 
    }); 
});

如果我想更改与jQuery所述特定的部门运行风格/ CSS参考？ – 2012-08-16 07:52:01

答

至于我有什么理解你的问题，这是你想要的。

这里的低于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>

改进建议：使用jquery兄弟姐妹（） http://jsfiddle.net/P5DCg/1/ – Guy 2011-05-24 03:05:25

@dana：你的欢迎:)也看看@Guy的建议应该好多了 – 2011-05-24 08:38:51

@伙计 - 我已经试过你的代码，但它适用于我点击的每个html元素的这种样式，并且我希望它只适用于最后一个。任何想法为什么？非常感谢 – dana 2011-05-24 10:09:07

答

您可以使用jQuery的.css方法..

参考css method

答

$(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');

答

哎德纳，如果我正确理解你想通过点击一个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可使用addClass，removeClass和toggleClass如果你想使用类，而不是内联样式。这意味着你可以这样做：

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

并在css中定义'selected'样式。

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

jquery更改div的样式点击

相关推荐