Question

我目前在导航中有一个列表：

extension UIView {
  func roundCorners(_ corner: UIRectCorner,_ radii: CGFloat) {
      let maskLayer = CAShapeLayer()
      maskLayer.frame = self.layer.bounds
      maskLayer.path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corner, cornerRadii: CGSize(width: radii, height: radii)).cgPath

      self.layer.mask = maskLayer
      layer.masksToBounds = true
  }
}

我希望在点击链接时更改活动类。有一个简单的方法吗？

Answer 1

从所有li中删除活动类并将其添加到当前单击的li

＆＃13;

$("li").click(
    function(event) {
      $('li').removeClass('active');
      $(this).addClass('active');
      event.preventDefault()
    }
);

＆＃13;

.active a{
color:red;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav menu">
    <li class="active"><a href="main.php"> MainPage</a></li>
    <li><a href="hello.php"> Second Link</a></li>
    <li><a href="third.php"> Third Link</a></li>
    <li><a href="/knowledgebase/"> Knowledge Base</a></li>
</ul>

＆＃13;

Answer 2

如果用户点击链接，我理解以下内容：父节点的类应该设置为活动

<ul class="nav menu">
    <li class="active"><a href="main.php">Main Page</a></li>
    <li><a href="hello.php">hello</a></li>
</ul>

选项1：服务器端解决方案

如果用户点击链接<a href="...">link</a>，则浏览器会导航到此链接。根据代码中的链接，这意味着浏览器会离开页面main.php并加载hello.php。在这种情况下，您的服务器接收页面请求并将页面返回给客户端（浏览器）。由于您的链接包含.php，我假设您使用php server side rendering。要add your navigation menu to every page我们可以include('myMenu.php');

这answer explains how include works。现在您可以在hello.php

中编写以下内容

<?php
    $hello = 'active';
    include 'myMenu.php';
?>

myMenu.php看起来像这样

<ul class="nav menu">
    <li class="<?php echo $main; ?>"><a href="main.php">Main Page</a></li>
    <li class="<?php echo $hello;?>"><a href="hello.php">hello</a></li>
</ul>

我没有安装php但无法测试它，但是i created this codepad demo并且输出是这个

<ul class="nav menu">
    <li class=""><a href="main.php">Main Page</a></li>
    <li class="active"><a href="hello.php">hello</a></li>
</ul>

由于hello.php内部变量$hello已设置为有效且变量$main未定义，class="active"和{{1}的输出为$hello } class=""。

选项2：客户端解决方案

使用javascript的客户端解决方案。

确保你prevent any default action normally taken by the implementation。 $main这意味着浏览器导航到下一页（请参阅HTML 4.01 Specification）。因此，单击链接The default behavior associated with a link is the retrieval of another Web resource不得触发默认行为。
将匹配的内容（页面<a href="hello.php">hello<php>的内容）加载到当前页面。这是通过javascript ajax请求（阅读更多here或here）来完成的。
设置父节点的活动类（列表项hello.php

一些指示

Document Object Model (DOM) Level 2 Events Specification：事件被调度到其目标EventTarget，并且发现任何触发的事件侦听器。然后，冒泡事件将触发通过向上跟踪EventTarget的父链找到的任何其他事件侦听器，
捕获：事件捕获是在事件的目标的祖先上注册的EventListener可以在事件的目标接收之前拦截给定类型的事件的过程。捕获从树的顶部（通常是文档）向下操作，使其与冒泡的对称相反，如下所述。在事件的初始发送之前，确定从树顶到事件目标的EventTargets链。
基于this answer <li>

如果您希望它在IE＆lt; 9中工作，您必须阻止点击链接IE < 9 uses only event bubbling, whereas IE9+ and all major browsers support both而不是父节点<a ...的默认行为。其他答案没有考虑到这一点。

结论

如果没有更多信息您正在寻找哪种选择，这就是在黑暗中钓鱼。

Answer 3

试试这个：

HTML：

<ul class="nav menu">
    <li><a href="main.php"> MainPage</a></li>
    <li><a href="hello.php"> Second Link</a></li>
    <li><a href="third.php"> Third Link</a></li>
    <li><a href="/knowledgebase/"> Knowledge Base</a></li>
</ul>

JavaScript：

$(function() {
    var u = window.location.href.substr(window.location.href
                .lastIndexOf("/") + 1);
    $(".nav li a").each(function() {
    $h = $(this).attr("href");
    if ($h == u || $h == '')
        $(this).addClass("active");
    })
});

请务必添加jQuery！

Answer 4

您可以通过多种方式执行此操作，具体取决于您使用的前端框架。您可以使用Jquery来检测点击并添加/删除类。

$("li").click(
    function(event) {
      $('li').removeClass('active')
      $(event.target.parentNode).addClass('active')
    }
);

这样做是检查所有li元素的点击次数。点击后，它会从所有active元素中删除li类，并将active类添加到当前单击的元素中。这是plunkr - https://plnkr.co/edit/E6wIUgzkvNjn0xFQoa7F?p=preview

单击链接时更改活动li

4 个答案:

选项1：服务器端解决方案

选项2：客户端解决方案

结论