Question

任何人都可以帮我一个脚本，以保持选定的链接突出显示？

<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; }

...谢谢

Answer 1

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

＆＃13;

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();

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

Answer 2

选择

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

的jQuery

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

Vanilla js

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

Answer 3

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

你可以：

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

Answer 4

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

4 个答案: