How to change CSS style of div after onclick method
Question
<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.
Any advice?
It works on this fiddle but not when i load it on my browser, am i linking the jquery to html correctly?
I'm open to suggestions if there are any other suggestions on how to do this, thanks!
3 answers
solution1
6 ACCPTED 2013-10-14 01:56:15
This is my revision: I added .ready() function to your code..
<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
css
.selected {
background-color : #fff000;
}
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 !important in your css..to prevent your style in hover background-color to be ignored..
solution2
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.
solution3
1 2015-01-13 21:56:39
For this kind of things, AngularJS comes in very handy.
Just add an ng-class to your div element, eg selected, and then associate that class to a behaviour on your 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. I didn't use your classes in particular because I figured that doing it this way would help the community a little more.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.