jQuery函数无法更改菜单项的颜色_Jquery

jQuery函数无法更改菜单项的颜色

jquery

jQuery函数无法更改菜单项的颜色,jquery,Jquery,HTML页面有一个未排序的列表，我们希望无论何时单击任何列表项，背景颜色都应更改如下：假设列表中有三个项目l1、l2、l3 当用户单击l1时，元素应更改其背景颜色，当单击l2时，属于l2时，应更改颜色，并使l1变为其正常颜色。下面是我的代码，请有人帮助我确定我做错了什么，以及如何克服它 $（'.nav'）。在（'click'，'li'，function（）上{ $（'.nav li'）.removeClass（'active'）； $（this.addClass（'active'）； });

HTML页面有一个未排序的列表，我们希望无论何时单击任何列表项，背景颜色都应更改如下：假设列表中有三个项目l1、l2、l3 当用户单击l1时，

元素应更改其背景颜色，当单击l2时，

属于l2时，应更改颜色，并使l1变为其正常颜色。下面是我的代码，请有人帮助我确定我做错了什么，以及如何克服它

$（'.nav'）。在（'click'，'li'，function（）上{
$（'.nav li'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
li.active{
背景色：红色；
颜色：#000；
游标：默认值；
}

标题

家
教程
关于
时事通讯
接触

要么需要在HTML内容之后移动脚本（就在正文结束之前），要么需要在DOMReady事件中包装JS代码，如注释中提到的@BenM

您可以参考以下工作示例：
使用DOMReady事件：

li.active{
背景色：红色；
颜色：#000；
游标：默认值；
}

$（函数（）{
$（'.nav'）。在（'click'，'li'，function（）上{
$（'.nav li'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});

家
教程
关于
时事通讯
接触

要么需要在HTML内容之后移动脚本（就在正文结束之前），要么需要在DOMReady事件中包装JS代码，如注释中提到的@BenM

您可以参考以下工作示例：
使用DOMReady事件：

li.active{
背景色：红色；
颜色：#000；
游标：默认值；
}

$（函数（）{
$（'.nav'）。在（'click'，'li'，function（）上{
$（'.nav li'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
});

家
教程
关于
时事通讯
接触

正确的格式
根据domjquery
    <!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">
    <head>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>Header</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            li.active {
                background-color: red;
                color: #000;
                cursor: default;
            }
        </style>
   </head>
   <body>
      <header>
        <div>
          <ul class="nav">
            <li>Home</li>
            <li>Tutorials</li>
            <li>About</li>
            <li>Newsletter</li>
            <li>Contact</li>
          </ul>
        </div>
      </header>
      <script>
        $(function(){
            $('.nav').on('click', 'li', function(){
                $('.nav li').removeClass('active');
                    $(this).addClass('active');
            });

        })
      </script>
    </body>
    </html>


标题
李：很活跃{
背景色：红色；
颜色：#000；
游标：默认值；
}

家
教程
关于
时事通讯
接触

$（函数（）{
$（'.nav'）。在（'click'，'li'，function（）上{
$（'.nav li'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
})
正确的格式
根据domjquery
    <!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">
    <head>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>Header</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            li.active {
                background-color: red;
                color: #000;
                cursor: default;
            }
        </style>
   </head>
   <body>
      <header>
        <div>
          <ul class="nav">
            <li>Home</li>
            <li>Tutorials</li>
            <li>About</li>
            <li>Newsletter</li>
            <li>Contact</li>
          </ul>
        </div>
      </header>
      <script>
        $(function(){
            $('.nav').on('click', 'li', function(){
                $('.nav li').removeClass('active');
                    $(this).addClass('active');
            });

        })
      </script>
    </body>
    </html>


标题
李：很活跃{
背景色：红色；
颜色：#000；
游标：默认值；
}

家
教程
关于
时事通讯
接触

$（函数（）{
$（'.nav'）。在（'click'，'li'，function（）上{
$（'.nav li'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
})
您需要在DOMReady事件（即$（function（）{}）；
）中包装代码。它似乎已经对我起作用了？您需要在DOMReady事件（即$（function（）{}）；
）中包装代码。它似乎已经对我起作用了？替换$（'.nav li'）可能更好。removeClass（'active'）与$（this）.siblines（）.removeClass（'active'）
@BenM--当然，但我只想指出代码的实际问题，而不是为了更好地重构它。：）替换$（'.nav li'）.removeClass（'active'）与$（this）.siblines（）.removeClass（'active'）
@BenM--当然，但我只想指出代码的实际问题，而不是为了更好地重构它。：）