我的javascript有什么问题?.className

What's wrong with my javascript? .className

本文关键字：className 问题 什么 javascript 我的      更新时间：2023-09-26

我正在研究导航，我的目标是当您单击链接时，它会将类更改为.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，我不知道出了什么问题。

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

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

上面的代码返回 nodelist .so elSet.className = active; work.so 不会将您的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>

你可以

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

演示：小提琴

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>

我想你过度设计它，首先你需要纠正你的 HTML 如下。

工作 js小提琴 

<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');
}
相关文章：