Question

我正在写一个网页，这个网页有一个菜单，可以在点击时更改其背景颜色。我用jquery做这个。现在我正在处理菜单本身。但是我遇到了一个问题。单击列表后，我的菜单项会改变颜色。但是在我点击另一个按钮后，我希望之前的更改消失而不会导致回发。有没有人知道怎么做？

这是我的代码

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

和更改颜色的jquery脚本

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

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

我正在使用asp.net webforms，并且已经包含了所有jquery库。

Answer 1

您可以使用CSS添加类，然后使用addClass()和removeClass()切换它：

添加和删除类：

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

<强> CSS：

.greybg{background-color:gray}

Answer 2

最简单，最快速，最好的方法是利用CSS并添加/删除一个类。

.BackgroundGray {
    background-color:gray
}

然后在jQuery中添加类：

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

然后用其他一些事件删除该类：

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

简单，干净，可扩展。

Answer 3

请使用此

<强>的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}

这样只有最后点击的元素才会有灰色背景

更改背景颜色返回jquery

3 个答案: