onClick 更改列表样式答案

【问题标题】：onClick change list stylesonClick 更改列表样式
【发布时间】：2022-04-15 18:21:20
【问题描述】：

假设我有一个简单的列表：

  <ul>
    <li class="notClicked">1</li>
    <li class="notClicked">2</li>
    <li class="notClicked">3</li>
  </ul>

我可以单击一个“li”更改所有li 的样式，除了单击的那个吗？

所以如果我点击“li”数字 2，那么列表将如下所示：

  <ul>
    <li class="notClicked">1</li>
    <li class="clicked">2</li>
    <li class="notClicked">3</li>
  </ul>

所以如果我点击第一个“li”，那么它会点击类，而其他的则不会点击。

如果你想玩它，这里是 jsbin：http://jsbin.com/ucuca4/edit

使用 Prototype 或纯 JavaScript 制作。

【问题讨论】：

标签： javascript onclick dom-events

【解决方案1】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title></title>
        <script language="JavaScript" type="text/javascript">
            /*<![CDATA[*/
            var Lst;

            function CngClass(obj){
             if (Lst) Lst.className='';
             obj.className='Clicked';
             Lst=obj;
            }

            /*]]>*/
        </script>
        <style>
            .notClicked {color: black}
            .Clicked {color: red}
        </style>
    </head>

    <body>
        <ul>
            <li>
                <a onclick="CngClass(this);" href="#" class="notClicked">1
                </a>
            </li>
            <li>
                <a onclick="CngClass(this);" href="#"  class="notClicked">2
                </a>
            </li>
            <li>
                <a onclick="CngClass(this);" href="#"  class="notClicked">3
                </a>
            </li>
        </ul>
    </body>
</html>

【讨论】：

【解决方案2】：

为什么要改变对方的风格？您可能想要更改被点击元素的样式。

如果是这样，您可以使用 jQuery

例子：

<li class = "notClicked">element 1</li>
<li class = "notClicked">element 2</li>
<li class = "notClicked">element 3</li>

$('.notClicked').click(function()
{
    $(this).addClass('active');
});

【讨论】：

因为我也需要改变别人:)
所以你希望其他人在点击一个元素时也有不同的类？

【解决方案3】：

<script>
    function changeClass(){
        document.getElementById("idElement").setAttribute("class", "Clicked");
    }
</script>

<ul>
    <li class="notClicked" >1</li>
    <li class="notClicked" onClick="changeClass()" id="idElement">2</li>
    <li class="notClicked">3</li>
</ul>

【讨论】：

Internet Explorer 7 及更低版本不支持使用 setAttribute 方法更改类。始终使用 className DOM 属性。
@Peter Mortensen：我看到你喜欢格式化问答的好方法。