javascript - 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=".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!

<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./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>

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!

Share Improve this question edited Oct 14, 2013 at 4:36 asked Oct 14, 2013 at 1:32 Chris 992 gold badges2 silver badges9 bronze badges

Add the css on the page load function? Like he click on the div to show the content, not web page load – Stephen Raghunath Commented Oct 14, 2013 at 1:35
I would like a function like the one shown here: jsfiddle/gSAjV/2 – Chris Commented Oct 14, 2013 at 1:45
The page loads up and the divs have no background color, but then would like to add a background color after the div is clicked to highlight the option the user clicked on – Chris Commented Oct 14, 2013 at 1:47
Your fiddle works for me – Oriol Commented Oct 14, 2013 at 1:51
@Oriol, you are able to change the background color to the fixed color provided in the script after clicking the option? – Chris Commented Oct 14, 2013 at 1:56

Add a ment |

3 Answers 3

Sorted by: Reset to default 6

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./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;
}

$('.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..

Try

$('.step_wrapper').on('click','.step_box',function () {
    $(this).parent().find('.step_box').css('background-color', '');
    $(this).css('background-color', '#fff000');
});

Demo

Note: this is only an improvement of the other answer, because I don't understand your problem very well.

For this kind of things, AngularJS es in very handy.

Just add an ng-class to your div element, e.g. 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 munity a little more.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to change CSS style of div after onclick method - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)