CODEWITHSUNDEEP
javascriptjqueryhtmlcssasp.net
nanobots
nanobots

Reputation: 457

Change background color back jquery

I am writing a webpage and this webpage have a menu that changes its background color while been clicked. I am doing this with jquery. Right now I am just working on the menu itself. However I encountered a problem. My menu item which is in a list does change color after I click on it. But after I click another button I want the previous change to go away without causing a postback. does anyone have a good idea how to do so?

here is my code 

<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%">
                <li>
                    <span><i class="icon-minus-sign"></i>Child</span>
                    <ul>
                        <li>
                            <span><i class="icon-leaf"></i>Grand Child</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <span><i class="icon-minus-sign"></i>Child</span>
                    <ul>
                        <li>
                            <span><i class="icon-leaf"></i>Grand Child</span>
                        </li>
                        <li>
                            <span><i class="icon-minus-sign"></i>Grand Child</span>
                            <ul>
                                <li>
                                    <span><i class="icon-minus-sign"></i>Great Grand Child</span>
                                    <ul>
                                        <li>
                                            <span><i class="icon-leaf"></i>Great great Grand Child</span>
                                        </li>
                                        <li>
                                            <span><i class="icon-leaf"></i>Great great Grand Child</span>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <span><i class="icon-leaf"></i>Great Grand Child</span>
                                </li>
                                <li>
                                    <span><i class="icon-leaf"></i>Great Grand Child</span>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <span><i class="icon-leaf"></i>Grand Child</span>
                        </li>
                    </ul>
                </li>
            </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 the jquery script to change color

    <script>
    $("span").click(function () {

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

I am using asp.net webforms and all the jquery libraries are included already.

Upvotes: 0

Views: 164

Answers (3)

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can rather add class with CSS and then toggle it using addClass() and removeClass():

For Adding and Removing Class:

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

CSS:

.greybg{background-color:gray}

Upvotes: 2

Sauryabhatt
Sauryabhatt

Reputation: 269

Just use this

JavaScript

$("span").click(function () { // use selector as per your requirement instead of span may be some class
   $('.greybgByJs').removeClass("greybgByJs");
   $(this).addClass("greybgByJs");
});

Css

.greybgByJs{background-color:gray}

This way only the last clicked element will have Gray background

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16369

The easiest, fastest, and best way to do this is to leverage CSS and just add / remove a class.

.BackgroundGray {
    background-color:gray
}

Then add the class in jQuery:

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

Then remove the class later with some other event:

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

Simple, clean, and extensible.

Upvotes: 0

Related Questions