javascript更改开关按钮和元素的类

Question

你好，

一个 friend 给了我这个改变开关按钮类的代码，但我做了修改，所以每个按钮通过像这样按下它们来改变 2 个独立元素的状态

function toggleClass(ev){
  var el = document.querySelector(".pressed");
  var fro = document.querySelector(".visible"); <--line added
  el.className = 'notpressed';
  ev.target.className = 'pressed';

  fro.className = 'notvisible'; <--line added
  ev.target.className = 'visible'; <--line added
}

span{
  cursor:pointer;
  padding:10px;
  border:1px solid #FCFCFC;
}
.notpressed{
  background:#CCC;
}
.pressed{
  background: #DFF789;
}
.visible{
  display:block;
}
.notvisible{
  display: none;
}

<span id="but1" class="pressed" onclick="toggleClass(event);">BUTTON 1</span>
<span id="but2" class="notpressed" onclick="toggleClass(event);">BUTTON 2</span>

<div id="elem1">hello<div>
<div id="elem2">bye<div>

但它不起作用。我错过了什么？

谢谢。

Answer 1

您没有关闭某些 div。试试下面的方法:

//initial setting
document.getElementById('elem2').className = 'notvisible';
document.getElementById('elem1').className = 'visible';
//on change
function toggleClass(ev){
  var fro = document.querySelector(".visible");
  var fro2 = document.querySelector(".notvisible");
  if(ev.target.id == 'but1'){
	document.getElementById('elem2').className = 'notvisible';
	document.getElementById('elem1').className = 'visible';
	ev.target.className = 'pressed';
	document.getElementById('but2').className = 'notpressed';
  }
  else if(ev.target.id == 'but2'){
	document.getElementById('elem1').className = 'notvisible'; 
	document.getElementById('elem2').className = 'visible';
	ev.target.className = 'pressed';
	document.getElementById('but1').className = 'notpressed';
  }
}

span{
  cursor:pointer;
  padding:10px;
  border:1px solid #FCFCFC;
}
.notpressed{
  background:#CCC;
}
.pressed{
  background: #DFF789;
}
.visible{
  display:block;
}
.notvisible{
  display: none;
}

<span id="but1" class="pressed" onclick="toggleClass(event);">BUTTON 1</span>
<span id="but2" class="notpressed" onclick="toggleClass(event);">BUTTON 2</span>



<div id="elem1" class="visible">hello</div>
<div id="elem2" class="notvisible">bye</div>