Menu
<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!
742
asked Dec 15 '25 02:12
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..
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
