通过点击另一个元素将类切换为元素
我想单击一个元素来切换一个完全不相关的元素（不是孩子，父母或兄弟姐妹）上引用的类，
例如，最初的代码看起来像这样
<a id="button">Button</a>
<div class="navigation">
Foo
</div>
当用户点击带有id button的元素时，HTML会变成看起来像这样的类（在已经引用“导航”的元素上引用类“open”：
<a id="button">Button</a>
<div class="navigation open">
Foo
</div>
用户应该可以通过点击带有ID button的元素来切换类。
我想用纯javascript来达到这个效果。
您可以将click事件附加到带有ID button然后单击使用getElementsByClassName()选择带有类navigation的元素（ti将返回节点列表），然后使用[0]选择第一个元素，然后使用toggle() ：
document.getElementById('button').onclick = function(){
document.getElementsByClassName('navigation')[0].classList.toggle("open");
}
希望这可以帮助。
document.getElementById('button').onclick = function(){
document.getElementsByClassName('navigation')[0].classList.toggle("open");
}.open{
background-color: green;
color: white;
}<a id="button">Button</a>
<div class="navigation">
Foo
</div> 您需要添加事件处理程序。 这可以通过简单地设置Element对象上的onClick属性来完成：
document.getElementById('button').onClick = function onClick() {
document.getElementsByClassName('navigation')[0].className += 'open';
};
但是，最好使用addEventListener以便将多个事件侦听器添加到相同的元素中：
document.getElementById('button').addEventListener('click', function onClick() {
document.getElementsByClassName('navigation')[0].className += 'open';
}, false);
编辑：它也更好地缓存你的元素引用变量如下所示：
var button = document.getElementById('button');
var nav = document.getElementsByClassName('navigation')[0];
button.addEventListener('click', function onClick() {
nav.className += 'open';
}, false);
EDIT2：如在Zakaria的回答中，您可能想要使用classList.add(x)而不是className += x 。 这更符合jQuery的工作方式。 但是，请注意，旧版本的IE不支持classList 。
编辑3：这是使用classList.toggle的最终版本
var button = document.getElementById('button');
var nav = document.getElementsByClassName('navigation')[0];
button.addEventListener('click', function onClick() {
nav.classList.toggle('open');
}, false);
classList使用className代替classList的快速替换：
function classList(elem) {
var cl = {
add: function (clas) {
elem.className += clas;
},
remove: function (clas) {
elem.className = elem.className.replace(clas, '');
},
toggle: function (clas) {
if (elem.className.indexOf(clas) > -1) {
cl.remove(clas);
} else {
cl.add(clas);
}
}
};
return cl;
}
// usage
classList(nav).add('open');
classList(nav).toggle('open');
尝试这个：
document.querySelector('div.navigation').classList.toggle('open');
如果你只有一个具有类导航的div元素，这将工作。 最好给它一个id，例如id = navigation
链接地址: http://www.djcxy.com/p/83971.html