Question

在我的网站上，顶部导航菜单栏有三个菜单项。我希望用户能够更轻松地了解他们所在的页面，而无需查看URL。这意味着，我想在选择后在每个菜单项上显示底部边框颜色。如果我重定向到另一个菜单项，底部边框颜色应该更改为新的菜单项。

我怎样才能做到这一点？

a {
  transition: all .3s; }
a:active,
a:hover,
a:visited {
outline: 0;
text-decoration: none; }
.main.sub-nav dd a:hover:after, .main.sub-nav dd a.active:after{
 bottom: -9px;
 background: #00ff00;
 display: block;
}

由于

Answer 1

尝试匹配window.location.pathname

document.addEventListener("DOMContentLoaded", function(event) { 
      if (window.location.pathname == '/page1.html') {
           var menuItem1 = document.querySelector('#menu-item-1');
           menuItem1.style.borderBottom = '1px solid red';
      }
      if (window.location.pathname == '/page2.html') {
          // and so on
      }
});

Answer 2

你可以在onclick函数中执行类似的操作：

var tabs = document.getElementsByClassName('navTab'); //Get every nav element

  Array.prototype.forEach.call(tabs,function(tab){
    tab.style.borderBottom = "2px solid #000000";  // Set every element's border back to normal
  });

  document.getElementById("tab" + tabNumber).style.borderBottom = "2px solid red";  //Set the selected border to a different color

工作演示： https://codepen.io/anon/pen/pPZWYy

锚标记可在选择时更改底部边框颜色

2 个答案: