Question

我在网站左侧创建了一个垂直导航。我们希望.item的背景颜色根据用户正在查看内容的子目录进行更改。因此，如果有人点击导航.item，则href会将其重定向到某个页面，我们希望.item突出显示我们可以为每个导航.item自定义的唯一十六进制颜色。所有6个导航项目都有不同的颜色。

有一点需要澄清的是，有时人们可能会在没有点击导航项目的情况下访问我们的网站。我希望导航项仍然基于人正在查看内容的当前子目录突出显示。这有助于他们轻松识别他们的位置，以及如果他们导航到社区的其他部分，如何回来。此外，如果一个人进行全局搜索并偶然发现我们的6个主要区域之一的内容，我们希望导航菜单能够立即识别他们当前的位置（基于网址），并在我们的垂直导航栏中突出显示导航.item

Javascript或Jquery是否可行？任何帮助将不胜感激!!

带有所有代码的FIDDLE。

示例CSS：

.navback {
  position: fixed;
  top: 0;
  left: 0px;
  width: 100px;
  height: 100%;
  background: #283237;
  z-index: 4;
}

.navbar {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 100px;
  height: 60vh;
  background: #283237;
  display: flex;
  z-index: 5;
  flex-direction: column;
}

.topbar {
  border-top: 1px solid #000;
  top: 44px;
}

.navbar .item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 40px;
  max-height: 100px;
  z-index: 5;
}

.navbar .item div.label {
  color: #fff;
  position: relative;
  top: 5px;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Segoe UI", sans-serif;
  transition: all 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  left: -100px;
}

示例HTML：

 <div class="topbar"></div>
  <div class="navback leftnav">
<div class="navbar">
  <div class="item hvr-shrink">
    <a href="https://community.canopytax.com/">
    <div>
        <img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
      <div class="label">Home</div>
    </div>
  </a>
  </div>

  <div class="item hvr-shrink">
    <a href="https://community.canopytax.com/community-central/">
    <div>
      <img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
      <div class="label">Central</div>
    </div>
  </a>
  </div>

Answer 1

<强> JS / jQuery的

// get the first directory by splitting "/dir/path/name" into an array on '/'
// get [1] instead of [0] b/c the first should be blank. wrap in /s.
hereDir = "/" + window.location.pathname.split("/")[1] + "/";

// rebuild the URL since you're using absolute URLs (otherwise just use hereDir)
hereUrl = window.location.protocol + "//" + window.location.host + hereDir;

$(".item")
    .find("[href^='" + hereUrl + "']")
        .closest(".item").addClass("here");

注意.find("[href^=...]")选择start with您正在寻找的内容。

<强> CSS

/* now use .here to style */
.item.here {
    background-color: purple;
}
.item.here .label {
    font-weight: bold;
}

Answer 2

在html（https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js）

中使用jquery

添加以下脚本

$('.item').click(function(){
    $('.item.active').removeClass("active");
    $(this).addClass('active');
})

CSS

.item.active {
  background-color: red;
}

请参阅更新的fiddle

Answer 3

要直接回答您的问题，是的，这也可以通过JavaScript / jQuery完成，但使用css :active选择器的方法要简单得多。

例如，如果用户点击.item 那么代码就是：

.item:active {
   background-color: #cecece; // or whatever styling you want
}

旁注：作为一名网站设计师，我一般建议使用:hover选择器来指导导航栏高亮而不是:active。

Answer 4

如果你正在使用jQuery，你可以循环遍历每个锚点并根据页面的当前URL进行测试，如下所示：

$(function highlightCurrentUrl() {
  var currentUrl = window.location.href;
  var items = $(".item").each(function() {
    var anchor = $(this).find('a');
    $(this).removeClass('active');

    //comparison logic
    if (anchor.prop('href') == currentUrl) {
      $(this).addClass("active");
    }

  });
});

这样做是为菜单中的匹配.item添加一个类。（由于内容安全策略，这在JSFiddle中不起作用，因此您必须对自己的环境进行测试。）

接下来，您需要定义将应用于.item.active DIV标记的样式。而且，如果你想为不同的项目设置不同的颜色，你应该在你的标记中给它们ID，所以你可以单独引用它们：

  <div class="item hvr-shrink" id="home-link">
    <a href="https://community.canopytax.com/">
      <div>
        <img src="https://png.icons8.com/ios/35/ffffff/home.png"/>
        <div class="label">Home</div>
      </div>
    </a>
  </div>

  <div class="item hvr-shrink" id="central-link">
    <a href="https://community.canopytax.com/community-central/">
      <div>
        <img src="https://png.icons8.com/ios/40/ffffff/conference-call.png">
        <div class="label">Central</div>
      </div>
    </a>
  </div>

这些规则规定，当active类添加到标识为div或home-link的{{1}}时，它应具有以下属性

central-link

根据网址或子目录突出显示当前导航选项卡

4 个答案: