Question

我想在我的项目中使用vanilla js。我有一些功能，我对其中一个有问题。脚本的想法是：点击主页面上的链接，重定向到其他页面;将类添加到＃div1。当我点击一个链接，我正在重定向到其他页面 - 没有什么可以。我找不到我做错了。

主页上的HTML：

<a href="pagelink" id="view">text</a>

其他网页的HTML：

<div class="row" id="div1"></div>
<div class="row" id="div2"></div>

JS

window.onload = function () {
    var hideDivOne = document.getElementById("div1"),
        View = document.getElementById("view");

    function swap() {
        hideDivOne.className += " notdisplayed";
    }

    if(View){
        View.addEventListener("click", swap, false);
    }
}

CSS

.notdisplayed {display:none;}

Answer 1

而不是

hideDivOne.className += " notdisplayed";

尝试：

hideDivOne.classList.add("notdisplayed");

如果你想删除这个类：

hideDivOne.classList.remove("notdisplayed");

或切换课程：

hideDivOne.classList.toggle("notdisplayed");

Answer 2

您的代码没有意义......在另一个页面上，View为null，因为您的链接不在HTML中了！因此，没有任何东西被执行，这不是你想要的。

实际上，您的主页中不需要JS。只需使用href属性中的正确网址即可使用HTML链接的原生行为：<a href="other_page.html" id="view">text</a>

当您在另一页上时，可以使用style属性隐藏div。看看这个演示：

.row {
  width: 100px;
  height: 100px;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: blue;
}

<div class="row" id="div1"></div>
<div class="row" id="div2"></div>

window.onload = function () {
  document.getElementById("div1").style.display = 'none';
};

.row {
  width: 100px;
  height: 100px;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: blue;
}

<div class="row" id="div1"></div>
<div class="row" id="div2"></div>

将类添加到给定元素不起作用？

2 个答案: