我的JavaScript怎么了？ .className

Question

我正在研究导航，我的目标是当您单击链接时，它将把类更改为.nav-link-active，同时将当前的.nav-link-active更改回.nav-link。

这里是我的代码：

<header>
<nav>
<div class="nav-link-active" onclick="activeNavLink();"><a href="#index">Home</a></div>
<div class="nav-link" onclick="activeNavLink();"><a href="#services">Services</a></div>
<div class="nav-link" onclick="activeNavLink();"><a href="#info">Info</a></div>
<div class="nav-link" onclick="activeNavLink();"><a href="#contact">Contact</a></div>
</nav>
</header>
<script type="text/javascript">
var revert = "nav-link";
var active = "nav-link-active";
function removeActive() {
    var elRevert = document.getElementsByClassName("nav-link-active");
    elRevert.className = revert;
}
function setActive() {
    var elSet = document.getElementsByClassName("nav-link");
    elSet.className = active;
}
function activeNavLink() {
    removeActive();
    setActive();
}
</script>

这对某人来说可能是一个简单的解决方法，但这是我第一次编写javascript，不知道出了什么问题。

编辑：感谢所有答复，非常感谢。现在是时候让我把脸埋在这本书里了。

Answer 1

var elSet = document.getElementsByClassName("nav-link");

上面的代码返回nodelist。因此elSet.className = active;无法工作。因此将setActive和activaNavLink更改为。

function setActive(ele) {
  ele.className = active;
}
function activeNavLink(ele) {
 removeActive();
 setActive(ele);
}

以及您的html

<div class="nav-link" onclick="activeNavLink(this);"><a href="#contact">Contact</a></div>

Answer 2

您可以

<header>
    <nav>
        <div class="nav-link-active" onclick="activeNavLink(this);"><a href="#index">Home</a>
        </div>
        <div class="nav-link" onclick="activeNavLink(this);"><a href="#services">Services</a>
        </div>
        <div class="nav-link" onclick="activeNavLink(this);"><a href="#info">Info</a>
        </div>
        <div class="nav-link" onclick="activeNavLink(this);"><a href="#contact">Contact</a>
        </div>
    </nav>
</header>

然后

//pass the current element
function activeNavLink(el){
    var active = document.getElementsByClassName('nav-link-active');
    if(active && active.length){
        //change the previous element if present
        active[0].className = 'nav-link';
    }
    el.className ='nav-link-active'
}

演示：Fiddle

Answer 3

var revert = "nav-link";
var active = "nav-link-active";

//remove active from links
function removeActive() {
    var activeLinks = document.getElementsByClassName("nav-link-active");
    for(var i = 0; i < activeLinks.length; i++)
    {
      activeLinks[i].className = revert;
    }
}

//set active to given element
function setActive(t) {
  t.className = active;
}

//remove active from links and set active to clicked elements 
function activeNavLink(t) {
    removeActive();
    setActive(t);
}

.nav-link-active{
  font-size:20px;
}
.nav-link{
  font-size:30px;
}

<header>
<nav>
<div class="nav-link-active" onclick="activeNavLink(this);"><a href="#index">Home</a></div>
<div class="nav-link" onclick="activeNavLink(this);"><a href="#services">Services</a></div>
<div class="nav-link" onclick="activeNavLink(this);"><a href="#info">Info</a></div>
<div class="nav-link" onclick="activeNavLink(this);"><a href="#contact">Contact</a></div>
</nav>
</header>

Answer 4

我想您已经完成了工程，首先需要更正如下所示的HTML。

正在工作jsFiddle

<header>
  <nav>
    <ul>
      <li ><a href="#index" onclick="addClass(this)" class="active">Home</a></li>
      <li><a href="#Services" onclick="addClass(this)"> Services </a></li>
      <li><a href="#info" onclick="addClass(this)"> info </a></li>
      <li><a href="#contact" onclick="addClass(this)">Contact</a></li>
    </ul>
   </nav>
 </header>

添加CSS

header ul{
  margin:0;
  padding:0;
}
header ul li{
  list-style:none;
  display:block;
}
header ul li a{
   display:block;
   color:black;
   text-decoration :none
}
header ul li a.active{
    color:red;
   text-decoration :underline
}

您可以使用类似的javascript

function addClass(obj) {
var a = document.getElementsByTagName('a');
// loop through all 'a' elements
for (i = 0; i < a.length; i++) {
    // Remove the class 'active' if it exists
    a[i].classList.remove('active')
}
// add 'active' classs to the element that was clicked
obj.classList.add('active');
}

Answer 5

如何在不使用href =“＃...”哈希的情况下继续进行href =“ /”？如果使用＃，似乎角形路由链接不起作用。如果我按照上面的示例替换＃哈希，它将无法正常工作。谁可以在这个问题上支持我？