如何在onclick方法之后更改div的CSS样式
[英]How to change CSS style of div after onclick method
问题描述
<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. 
现在我在一个父div中有3个子div。 Right now the step_box divs show a background color when hovering. 现在，step_box divs在悬停时显示背景颜色。 However; 然而; after the onclick method, I want the stepbox div to keep the background color with the style of ".selected". 在onclick方法之后，我希望stepbox div保持背景颜色的样式为“.selected”。 That way it highlights the div the user clicked on. 这样它会突出显示用户点击的div。
Any advice? 有什么建议？
It works on this fiddle but 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! 如果对于如何做到这一点有任何其他建议，我愿意接受建议，谢谢！
3 个解决方案
解决方案1
6 已采纳 2013-10-14 01:56:15
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')
});
.step_box:hover, #selected_step_box, .QuickStartLong:hover {
background-color: rgb(184, 225, 252) !important;
}
as you can see..just add !important in your css..to prevent your style in hover background-color to be ignored.. 正如你所看到的......只是在你的css中添加！重要...以防止你的风格在悬停背景颜色被忽略..
解决方案2
1 2013-10-14 02:00:47
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. 注意：这只是对另一个答案的改进，因为我不太了解你的问题。
解决方案3
1 2015-01-13 21:56:39
For this kind of things, AngularJS comes in very handy. 对于这种事情，AngularJS非常方便。
Just add an ng-class to your div element, eg selected, and then associate that class to a behaviour on your css. 只需在div元素中添加一个ng-class ，例如selected，然后将该类与css上的行为相关联。 I would do something like: 我会做的事情如下：
<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. 您需要在文件中包含angular.min.js文件。 I didn't use your classes in particular because I figured that doing it this way would help the community a little more. 我没有特别使用你的课程，因为我认为这样做可以帮助社区更多一点。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.