jQuery onclick方法后如何更改div的CSS样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19352285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change CSS style of div after onclick method
提问by Chris
<html>
<head>
<style type="text/css">
.step_box {
border: 1.0px solid rgb(204, 204, 204);
border-radius: 10.0px 10.0px 10.0px 10.0px;
}
.step_box:hover{
background: rgb(184, 225, 252);
}
.selected {
background-color : #fff000;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
$(this).addClass('selected')
});
</script>
</head>
<body>
<div class="step_wrapper">
<div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span></div>
<div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span></div>
<div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span></div>
</div>
</body>
</html>
Right now I have 3 child divs inside one parent div. Right now the step_box divs show a background color when hovering. However; after the onclick method, I want the stepbox div to keep the background color with the style of ".selected". That way it highlights the div the user clicked on.
现在我在一个父 div 中有 3 个子 div。现在，当悬停时 step_box div 会显示背景颜色。然而; 在 onclick 方法之后，我希望 stepbox div 保持背景颜色为“.selected”样式。这样它就会突出显示用户点击的 div。
Any advice?
有什么建议吗？
It works on this fiddlebut not when i load it on my browser, am i linking the jquery to html correctly?
它适用于这个小提琴，但当我在浏览器上加载它时不起作用，我是否正确地将 jquery 链接到 html？
I'm open to suggestions if there are any other suggestions on how to do this, thanks!
如果有关于如何做到这一点的任何其他建议，我愿意接受建议，谢谢！
回答by Olrac
This is my revision: I added .ready() function to your code..
这是我的修订版：我在您的代码中添加了 .ready() 函数。
<html>
<head>
<style type="text/css">
.step_box {
border: 1.0px solid rgb(204, 204, 204);
border-radius: 10.0px 10.0px 10.0px 10.0px;
}
.step_box:hover, #selected_step_box, .QuickStartLong:hover {
background: rgb(184, 225, 252);
}
.selected {
background-color : #fff000;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$( document ).ready( function(){
$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
$(this).addClass('selected')
});
});
</script>
</head>
<body>
<div class="step_wrapper">
<div class="step_box" > <span>Content of page 1</span></div>
<div class="step_box" > <span>Content of page 2</span></div>
<div class="step_box" > <span>Content of page 3</span></div>
</div>
</body>
</html>
Try this approach - version 2
试试这个方法 -版本 2
css
css
.selected {
background-color : #fff000;
}
js
js
$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
$(this).addClass('selected')
});
Try this Fiddle:
试试这个小提琴：
.step_box:hover, #selected_step_box, .QuickStartLong:hover {
background-color: rgb(184, 225, 252) !important;
}
as you can see..just add !importantin your css..to prevent your style in hover background-color to be ignored..
如您所见..只需在您的css 中添加!important.. 以防止您的悬停背景颜色样式被忽略..
回答by Oriol
Try
尝试
$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
});
Note: this is only an improvement of the other answer, because I don't understand your problem very well.
注意：这只是对其他答案的改进，因为我不太了解您的问题。
回答by Edd
For this kind of things, AngularJS comes in very handy.
对于这种事情，AngularJS 就派上用场了。
Just add an ng-classto your div element, e.g. selected, and then associate that class to a behaviour on your css. I would do something like:
只需将一个添加ng-class到您的 div 元素，例如 selected，然后将该类与您的 css 上的行为相关联。我会做这样的事情：
<html ng-app="ExampleApp">
<head>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript">
(function() {
var app = angular.module('ExampleApp', []);
app.controller('ExampleController', function(){
this.selected = 0; // or 1 if you want the first to be selected by default
this.isSelected = function(value){
return this.selected === value;
};
this.setSelected = function(value){
this.selected=value;
};
});
})();
</script>
<style type="text/css">
.selected {
color: #000;
}
<style>
</head>
<body>
<div ng-controller="ExampleController as examplectrl">
<div ng-click="examplectrl.setSelected(1)" ng-class="{selected: examplectrl.isSelected(1)}" >
<!-- Your content -->
</div>
<div ng-click="examplectrl.setSelected(2)" ng-class="{selected: examplectrl.isSelected(2)}" >
<!-- Your content -->
</div>
<div ng-click="examplectrl.setSelected(3)" ng-class="{selected: examplectrl.isSelected(3)}" >
<!-- Your content -->
</div>
</div>
</body>
</html>
You need to have the angular.min.js file in your files. I didn't use your classes in particular because I figured that doing it this way would help the community a little more.
您的文件中需要有 angular.min.js 文件。我并没有特别使用你的课程，因为我认为这样做会更多地帮助社区。
