Question

130

How to change CSS style of div after onclick method

rated 0 times [ 134] [ 4] / answers: 1 / hits: 54116 / 11 Years ago, mon, october 14, 2013, 12:00:00

<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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trinityr

Add To Favorites

Follow

Total Points: 49

Total Questions: 107

Total Answers: 96

Location: Mayotte

Member since Fri, Oct 1, 2021

3 Years ago

answered 11 Years ago masonm · Accepted Answer

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