jquery 动态点击li标签切换背景颜色

最新推荐文章于 2023-09-26 00:06:25 发布

原创最新推荐文章于 2023-09-26 00:06:25 发布 · 8.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery #前端 #ul #java

js 同时被 2 个专栏收录

10 篇文章

订阅专栏

jquery

8 篇文章

订阅专栏

本文介绍如何使用 jQuery 实现网页菜单项点击时的高亮显示效果，并提供了具体的 HTML 结构、样式及 JavaScript 代码实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多讲老规矩先上图看效果：

<!DOCTYPE html>

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<style>
.currentli {
            color:#186ecc;
            background-color:#fff;
        }
</style>
<body>
<ul id="gmenu">
<li class="selected">Hello Again</li>
<li class="selected">Hello Again</li>
<li>And Again</li>
</ul>
<script>

$("#gmenu p").click(function () {
                    $(this).addClass("currentli").siblings().removeClass();
                })
</script>

</body>

</html>

如果以上没有起作用可是尝试以下：

    $(".gmenu ul li").click(function () {
          $(".gmenuulul li").removeClass();
          $(this).addClass("currentli");
    })