将活动类添加到li a jquery答案

【问题标题】：Add active class to li a jquery将活动类添加到li a jquery
【发布时间】：2019-07-13 17:31:20
【问题描述】：

每次单击列表项时，我都会尝试为它删除并设置一个活动类。我无法理解错误在哪里。提前致谢

<ul id="active-menu" class="ul">
  <li class="menu_li">
    <a id="li1" class="blogname active" href="index.php">
      <?=$m1?>
    </a>
  </li>
  <li class="menu_li">
    <a id="li3" class="blogname" href="work.php">
      <?=$m3?>
    </a>
  </li>
  <li class="menu_li">
    <a id="li4" class="blogname" href="clients.php">
      <?=$m4?>
    </a>
  </li>
  <li class="menu_li">
    <a id="li2" class="blogname" href="blog.php">
      <?=$m2?>
    </a>
  </li>
  <li class="menu_li">
    <a id="li5" class="blogname" href="contact.php">
      <?=$m5?>
    </a>
  </li>
</ul>

$('#active-menu').on('click', 'a', function() {
  $('#active-menu a.active').removeClass('active');
  $(this).addClass('active');
});

【问题讨论】：

链接点击真的会导致新页面被加载吗？如果是这样，那就是问题所在。

标签： jquery class

【解决方案1】：

根据您的需要，您不需要为 a 标签单击而拥有的监听器，而是必须使用 $_SERVER['REQUEST_URI'] 获取当前页面名称，并根据激活 a 标签使用添加活动类的条件。

【讨论】：

感谢您的回答：现在活动类可以按我的意愿工作，但是 href 不会从一个页面转到另一个页面，它保持在同一页面中（
如果你不阻止默认，如果它真的很短暂地显示，那么添加活动类的目的是什么？您会在点击后很快进入一个新页面吗？也许我不明白你想通过 AJAX 加载内容的问题。
我只想在女巫页面中显示用户现在是他：例如，当网站加载时，主页链接处于活动状态（颜色为红色），所以，我想要，当用户点击另一个链接，主页应该像其他人一样变得被动，点击的页面变得活跃。这是我想做的一个目的，谢谢

【解决方案2】：

我了解到您将这段 HTML 作为固定菜单元素包含在您拥有的每个 PHP 文件中。

因此，任何时候有人点击菜单链接，他们基本上都会被导航到另一个页面（除非您通过 ajax 加载链接 - 情况似乎并非如此）。在这种情况下，无需通过 jQuery 添加/删除活动类 - 实际上它也不会产生任何影响，因为当您离开时不会保留元素的状态。

正如第一个答案中所指出的，您需要首先检查加载了哪个页面，然后在必要时在菜单项上添加“活动”类。

这可以通过首先确定活动页面来处理：

$request = $_SERVER['REQUEST_URI'];
$active_page = "";

if (strpos($request, 'blog.php') !== false) {
   $active_page = "blog";   
} else if (strpos($request, 'contact.php') !== false {
   $active_page = "contact";
}

... 等等。然后，当您列出菜单项时，您可以检查它们是否是活动项，如果是，您可以添加活动类，例如：

<ul id="active-menu" class="ul">
  <li class="menu_li">
    <a class="blogname <?=$active_page == 'blog' ? 'active' : ''?>"  href="blog.php">
      Menu item text
    </a>
  </li>
  <li class="menu_li">
    <a class="blogname <?=$active_page == 'contact' ? 'active' : ''?>"  href="contact.php">
      Menu item text
    </a>
  </li>
</ul>

【讨论】：