当一个超链接标签被点击时，使用jquery添加一个类到正文中，这个超链接标签位于li标签的子html中

Adding a class to body when a Hyperlink tag is clicked which is in the child ul of li tag using jquery

本文关键字：标签 超链接 一个 html 正文 li 使用 添加 jquery      更新时间：2023-09-26

我想在点击链接时为正文添加一个类。当链接在父ul中时，这很容易做到，但我的问题是，我想为父li的子ul中存在的链接做到这一点。每当我试着这样做的时候都没有效果。我想做的是如下所示:脚本:

    <script>
      $(document).ready(function () {
        $("ul.treeview-menu").find("a.links").click(function () {
            $("body").addClass("sidebar-collapse");
         });
      });
   </script>
 <ul class="sidebar-menu nav nav-list" id="dashboard-menu">
    <li class="treeview">
         <a rel="tooltip" data-placement="right" target="_self" href="">
             <span class="caption">Parent Link</span>
          </a>
          <ul class="treeview-menu">
               <li>
                     <a href="any-link" target="_self" class="links">child link</a>
               </li>
          </ul>
    </li>
 <ul>

提前感谢。

尝试on('click',...)，可能你的导航将在加载页面后动态生成，所以你必须使用委托事件绑定

  $(document).ready(function () {
    $(document).on('click','ul.treeview-menu a.links',function () {
        $("body").addClass("sidebar-collapse");
    });
  });

<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
    <li class="treeview">
         <a rel="tooltip" data-placement="right" target="_self" href="">
             <span class="caption">Parent Link</span>
          </a>
          <ul class="treeview-menu">
               <li>
                     <a href="abc" target="_self" class="links">child link</a>
               </li>
          </ul>
    </li>
 <ul>

你有两个问题:

1- this line//});它被注释了，阻止了你的代码工作。

2-当点击超链接时，它会刷新页面，因此您添加到以前的HTML中的任何类都已被擦除，这就是为什么您希望能够看到任何更改。

试试这个:

 <script>
      $(document).ready(function () {
        $("ul.treeview-menu").find("a.links").click(function (e) {
        e.preventDefault()
            $("body").addClass("sidebar-collapse");
        });
      });
   </script>
 <ul class="sidebar-menu nav nav-list" id="dashboard-menu">
    <li class="treeview">
         <a rel="tooltip" data-placement="right" target="_self" href="">
             <span class="caption">Parent Link</span>
          </a>
          <ul class="treeview-menu">
               <li>
                     <a href="abc" target="_self" class="links">child link</a>
               </li>
          </ul>
    </li>
 <ul>


 $(document).ready(function () {
    $("ul.treeview-menu").find("a.links").click(function (e) {
    e.preventDefault()
        $("body").addClass("Enter your class name");
    });
  });
相关文章：