2011-05-23 104 views
20

我有一个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'); 
    }); 
}); 
+0

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

回答

29

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

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

+2

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

+0

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

+0

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

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'); 
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可使用addClass,removeClass和toggleClass如果你想使用类,而不是内联样式。这意味着你可以这样做:

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

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

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