如何在整个过程中突出显示活动链接 - Bootstrap？答案

【问题标题】：How to keep an active link highlighted throughout - Bootstrap?如何在整个过程中突出显示活动链接 - Bootstrap？
【发布时间】：2018-01-30 05:06:42
【问题描述】：

任何人都可以帮助我编写一个可以突出显示选定链接的脚本吗？

<div id="productnav">
<nav>
<ul class="nav">
<li><a href="<?php echo $prefix; ?>pages/one.php?category=1" id="navelement1"<?php if ($c == 1) echo ' class="current"';?>>One</a></li>
<li><a href="<?php echo $prefix; ?>pages/two.php?category=2" id="navelement2"<?php if ($c == 2) echo ' class="current"';?>>Two</a></li>
<li><a href="<?php echo $prefix; ?>pages/three.php?category=3" id="navelement3"<?php if ($c == 3) echo ' class="current"';?>>Three</a></li>
<li><a href="<?php echo $prefix; ?>pages/four.php?category=4" id="navelement4"<?php if ($c == 4) echo ' class="current"';?>>Four</a></li></li>
</ul>
</nav>
</div>

下面的代码只保持第一个点击的链接突出显示，一旦您在所选页面上选择另一个项目，它就不再保持活动状态。

 Array.prototype.forEach.call(
     document.querySelectorAll('#productnav a[href]'), 
     function(t) { 
        var hr = t.href.split("/").pop();
        if (window.location.href.indexOf(hr) > -1)
            t.className = 'active'; 
        else
            t.className = '';
     }
  );

这里的 CSS

#productnav ul li a.active { border-right: solid 8px rgb(200,10,50);  text-decoration: none; background-color: #4E5765; !important; }

谢谢...

【问题讨论】：

请将你的代码压缩成一个sn-p，你不需要3个
请在 sn-p 中只写 HTML 而不是 PHP。
您是否进行了调试以了解为什么某些链接可能无法通过您在 indexOf 的检查？您正在比较 HREF 以查看它是否包含当前页面 URL 并突出显示那些包含的链接。可能只有 1 个链接成功通过该测试并获得分配的“活动”类。您是否检查过元素以查看是否添加了“活动”类？
你试过我给你的任何代码sn-ps吗？

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您可以使用 JQuery 来添加活动类：

function activeClass() {
  var fullCurrentURL = window.location.href;
  var CurrentURLparts = fullCurrentURL.split("/");
  var CurrentURLindex = CurrentURLparts.length - 1;
  var CurrentURL = CurrentURLparts[CurrentURLindex];
  console.log(CurrentURL);

  $('.navbar-nav > li a').each(function() {
    var fullLinkURL = $(this).attr('href');
    var LinkURLparts = fullLinkURL.split("/");
    var LinkURLindex = LinkURLparts.length - 1;
    var LinkURL = LinkURLparts[LinkURLindex];
    if (LinkURL === CurrentURL) {
      $(this).parents("li").addClass("active");
      $(this).closest("ul").css('display', 'block');
    }
  });
}
activeClass();

#productnav ul li.active  a {
 border-right: solid 8px rgb(200,10,50); 
 background-color: #4E5765;
 color: #fff;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<nav id="productnav" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
     <li><a href="/about" title="About Us">About Us</a></li>
     <li><a href="/js" title="JavaScript">JavaScript</a></li>
     <li><a href="/contact" title="Contact Us">Contact Us</a></li>
    </ul>
  </div>
</nav>

【讨论】：

没想到这种方法 :) 不错！

【解决方案2】：

选择器

const selector = `nav a[href^="/${location.pathname.split("/")[1]}"]`;

jQuery

$(selector).addClass('active');

原版js

Array.from(document.querySelectorAll(selector))
    .forEach(a => a.classList.add('active'));

【讨论】：

【解决方案3】：

这是不可能的，因为当用户点击一个链接时，页面会发生变化，并且 JavaScript 无法“记住”用户之前点击过哪些链接，因为脚本已经重新加载。

你可以：

将点击的链接存储在浏览器内存/Cookie中；
通过 XHR 和 jQuery 使用异步页面加载；

【讨论】：

您好 Syncro，您使用 cookie 可能是对的，因为没有其他方法（上图）对我有用。在嵌入 cookie 后，您能否给我一个关于如何编写 Java 代码的提示？
你的意思是javascript吗？

【解决方案4】：

如果您可以通过 PHP 将 active 类添加到包含指向当前页面的链接的列表项中，请执行以下操作：

.navbar-nav li.active a {
  background: rgba(0, 0, 0, .1);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav id="productnav" class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li><a href="/about" title="About Us">About Us</a></li>
    <li class="active"><a href="/contact" title="Contact Us">Contact Us</a></li>
  </ul>
</nav>

如果您想要一个用于添加 active 类的 Java Script 解决方案，请告诉我。

【讨论】：