Adjust the background color using jQuery to its original hue

Question

Adjust the background color using jQuery to its original hue

While working on a webpage, I am implementing a menu that changes its background color upon being clicked using jQuery. Currently, my focus is on refining the functionality of the menu itself. However, I've encountered an issue - once I click on a menu item and then proceed to click on another one, I want the previous color change to revert without triggering a postback. Does anyone have any suggestions on how to achieve this?

Below is the code snippet:

<form id="form1" runat="server">
<div>

    <link href="Content/TreeViewCss.css" rel="stylesheet" />
<div class="tree well">
    <ul>
        <li style="width: 100%">
            <span ><i class="icon-folder-open"></i>Parent</span>
            <ul style="width: 100%">
                ... (remaining HTML code) ...
            </ul>
        </li>
        <li>
            <span><i class="icon-folder-open"></i>Parent2</span>
            <ul>
                <li>
                    <span><i class="icon-leaf"></i>Child</span>
                </li>
            </ul>
        </li>
    </ul>
</div>

</div>
</form>

And here's the jQuery script for changing the color:

<script>
    $("span").click(function () {
        $(this).css("background-color", "gray");
    });
</script>

I am utilizing ASP.NET WebForms, with all necessary jQuery libraries already included.

javascript jquery html css asp.net

Answer 1

Answer №1

To achieve the desired effect, you could apply a CSS class and then switch it on or off using the methods addClass() and removeClass():

Here is an example of how to Add and Remove Class:

 $("span").click(function () {
   $("span").removeClass("highlight");
   $(this).addClass("highlight");
 });

The corresponding CSS would be:

.highlight{background-color:yellow}

Answer 2

To achieve the desired effect, you could apply a CSS class and then switch it on or off using the methods addClass() and removeClass():

Here is an example of how to Add and Remove Class:

 $("span").click(function () {
   $("span").removeClass("highlight");
   $(this).addClass("highlight");
 });

The corresponding CSS would be:

.highlight{background-color:yellow}

Answer 3

Answer №2

One of the most effective and efficient methods to achieve this is by utilizing CSS and dynamically applying or removing a specific class.

.BackgroundGray {
    background-color:gray
}

You can then use jQuery to add the class:

$(this).addClass('ButtonGray');

And later remove the class using another event:

$(this).removeClass('ButtonGray');

This approach is straightforward, organized, and easily customizable.

Answer 4

One of the most effective and efficient methods to achieve this is by utilizing CSS and dynamically applying or removing a specific class.

.BackgroundGray {
    background-color:gray
}

You can then use jQuery to add the class:

$(this).addClass('ButtonGray');

And later remove the class using another event:

$(this).removeClass('ButtonGray');

This approach is straightforward, organized, and easily customizable.

Answer 5

Answer №3

Simply follow these steps

JavaScript

$("span").click(function () { // choose a specific selector instead of 'span' to customize
   $('.highlighted').removeClass("highlighted");
   $(this).addClass("highlighted");
});

Css

.highlighted{background-color:yellow}

This method ensures only the most recent clicked item is highlighted in Yellow

Answer 6

Simply follow these steps

JavaScript

$("span").click(function () { // choose a specific selector instead of 'span' to customize
   $('.highlighted').removeClass("highlighted");
   $(this).addClass("highlighted");
});

Css

.highlighted{background-color:yellow}

This method ensures only the most recent clicked item is highlighted in Yellow

Adjust the background color using jQuery to its original hue

Answer №1

Answer №2

Answer №3

Similar questions

What could be the reason for a particular product edit page showing up completely blank?

Customize the style based on the state using styled components

Having trouble locating elements using Selenium in Python?

Ways to ascertain if a view has completed rendering in JavaScript

Apply the CSS style to make one element identical to another, while modifying a single property

Can you explain the function of "app.router" in the context of Express.js?

What is the best way to deactivate unclicked href links within a loop?

This webpage is optimized for all browsers, with the exception of the Android Browser that may display fonts with larger sizes

Is there a potential impact on performance when utilizing local variables instead of repeatedly accessing properties?

The transition feature is not functioning properly in Firefox

The method of stamping masonry is not encircling

Guide to sending an ajax request from one page and receiving the response on a different page

Assign an event listener to a collection of elements

Cross-domain scripting with JavaScript

Organizing subcategories within a dropdown checklist

Applying CSS transition delays to multiple images

Is there a way to change the fill color of an SVG circle using Thymeleaf?

How can I stop the li item from swiping right in JQuery mobile?

When using props.onChange(e.target.value) in a textField component in Material UI, it unexpectedly returns an object instead of a value

Generate an array from a string where certain words are substituted with objects featuring the correct formatting styles