Steps for modifying the CSS style of a div element following an onclick event:

Question

Steps for modifying the CSS style of a div element following an onclick event:

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

At the moment, there are three child divs within a parent div. The step_box divs currently have a background color on hover. However, after clicking using the onclick method, I would like the step_box div to retain the background color with the ".selected" style. This will help highlight the div that the user selected.

Any suggestions on how to achieve this?

The code appears to work on this fiddle, but it doesn't function properly when loaded in my browser. Could it be an issue with how I linked jQuery to the HTML document?

If there are alternative methods or suggestions for accomplishing this task, I am open to hearing them. Thank you!

javascript jquery html css

Answer 1

Answer №1

My updated version includes the addition of a .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>

For an alternative solution, check out version 2

css

.selected {
    background-color : #fff000;
}

js

$('.step_wrapper').on('click','.step_box',function () {
    $('.step_box').removeClass('selected');
    $(this).addClass('selected')
});

Take a look at this Fiddle:

.step_box:hover, #selected_step_box, .QuickStartLong:hover {
    background-color: rgb(184, 225, 252) !important;
}

To ensure your hover background color style is applied, use !important in your CSS.

Answer 2

My updated version includes the addition of a .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>

For an alternative solution, check out version 2

css

.selected {
    background-color : #fff000;
}

js

$('.step_wrapper').on('click','.step_box',function () {
    $('.step_box').removeClass('selected');
    $(this).addClass('selected')
});

Take a look at this Fiddle:

.step_box:hover, #selected_step_box, .QuickStartLong:hover {
    background-color: rgb(184, 225, 252) !important;
}

To ensure your hover background color style is applied, use !important in your CSS.

Answer 3

Answer №2

Test it out

$('.section_container').on('click','.section_box',function () {
    $(this).parent().find('.section_box').css('background-color', '');
    $(this).css('background-color', '#f0f0f0');
});

Demo

Please note that this is simply an enhancement of the previous solution, as I may not fully comprehend your issue.

Answer 4

Test it out

$('.section_container').on('click','.section_box',function () {
    $(this).parent().find('.section_box').css('background-color', '');
    $(this).css('background-color', '#f0f0f0');
});

Demo

Please note that this is simply an enhancement of the previous solution, as I may not fully comprehend your issue.

Answer 5

Answer №3

If you're looking to accomplish this task, AngularJS can be a valuable tool.

To make it work, simply include an ng-class in your div element with a class like "selected", and then define the behavior in your CSS. Here's an example:

<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 set it as 1 for the first item to be selected initially
                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>

Make sure to have the angular.min.js file included in your project files. I used generic classes in this example for easier understanding by the community.

Answer 6

If you're looking to accomplish this task, AngularJS can be a valuable tool.

To make it work, simply include an ng-class in your div element with a class like "selected", and then define the behavior in your CSS. Here's an example:

<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 set it as 1 for the first item to be selected initially
                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>

Make sure to have the angular.min.js file included in your project files. I used generic classes in this example for easier understanding by the community.

Steps for modifying the CSS style of a div element following an onclick event:

Answer №1

Answer №2

Answer №3

Similar questions

Having difficulty toggling checkboxes within a grid using the select all feature

Issue with Material UI React: Navbar does not properly align the box to the right side

If the text is too lengthy, enclose it within a div element

Capture data from Ajax requests and store them in PHP variables

Can AJAX Delete requests be executed without using jQuery?

Tips for validating a form with the assistance of jQuery

Using AJAX, JQuery, and PHP to convert a given name to match the columns in a query, utilizing the data sent

Multi-line auto-suggest list with typeahead functionality

Is it possible to display one division on top of another with a transparent opacity effect in HTML?

Looking for assistance with coding to show dates?

Pressing on an HTML element using JavaScript via the Selenium driver does not trigger the action

ngSanitize continues to present plain text rather than rendering HTML code

"Trouble with making jQuery AJAX calls on Internet Explorer versions 8 and 9

Changing the background color of a PHP input based on the webpage being viewed - here's how!

After AJAX has been loaded, Readmore.js fails to function properly

struggling to perfect the CSS styling

Troubleshooting the issue with generateStaticParams() in NextJs/TypeScript

Unable to directly assign a variable within the subscribe() function

"Utilizing AngularJS to asynchronously send an HTTP POST request and dynamically update

Using table.column as a function in jQuery datatabbe is not supported