我的javascript出了什么问题？ 。班级名称

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