Javascript （HTML/Js）循环元素可见性

var-terminal=document.getElementById（'terminal'）；
var vncScreen=document.getElementById（'screen'）；
var video=document.getElementById（'video'）；
var vncToggle=document.getElementById（'vncToggle'）；
var termToggle=document.getElementById（'terminalToggle'）；
termToggle.onclick=函数toggleTerminal（）{
if（terminal.classList.contains（'hide'））{
terminal.classList.remove（'hide'）；
if（vncScreen.classList.contains（'hide'））{}else{vncScreen.classList.add（'hide'）}
if（video.classList.contains（'hide'））{}else{video.classList.add（'hide'）}
}否则{
terminal.classList.add（'hide'）；
if（video.classList.contains（'hide'））{video.classList.remove（'hide'）}else{
}
}
vncToggle.onclick=函数toggleVNC（）{
if（vncScreen.classList.contains（'hide'））{
vncScreen.classList.remove（'hide'）；
if（terminal.classList.contains（'hide'））{}else{terminal.classList.add（'hide'）}
if（video.classList.contains（'hide'））{}else{video.classList.add（'hide'）}
}否则{
vncScreen.classList.add（'hide'）；
if（video.classList.contains（'hide'））{video.classList.remove（'hide'）}else{
}
}

。黑盒{
背景：黑色；
高度：500px；
宽度：500px；
位置：绝对位置；
}
.绿盒子{
背景：绿色；
高度：500px；
宽度：500px；
位置：绝对位置；
}
.蓝盒子{
背景：蓝色；
高度：500px；
宽度：500px；
位置：绝对位置；
}
.隐藏{
显示：无；
}

切换终端
切换vnc

有关功能，请参见相关代码片段，

Js

冗余发布在此处：

var terminal = document.getElementById('terminal');
var vncScreen = document.getElementById('screen');
var video = document.getElementById('video');

var vncToggle = document.getElementById('vncToggle');
var termToggle = document.getElementById('terminalToggle');

termToggle.onclick = function toggleTerminal() {

  if (terminal.classList.contains('hide')) {
    terminal.classList.remove('hide'); 
    if (vncScreen.classList.contains('hide')) {} else {vncScreen.classList.add('hide')}
    if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
  } else {
    terminal.classList.add('hide'); 
    if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
  }
}

vncToggle.onclick = function toggleVNC() {

  if (vncScreen.classList.contains('hide')) {
    vncScreen.classList.remove('hide'); 
    if (terminal.classList.contains('hide')) {} else {terminal.classList.add('hide')}
    if (video.classList.contains('hide')) {} else {video.classList.add('hide')}
  } else {
    vncScreen.classList.add('hide'); 
    if (video.classList.contains('hide')) {video.classList.remove('hide')} else {}
    }
}

---

您知道属性

hidden

与类

hide

的功能相同，但不需要任何CSS吗？您可以在问题中添加一个堆栈片段来显示问题吗？@evolutionxbox我不知道-因此它会像

object.style.visibility=“visible | hidden | collapse | initial | inherit”一样使用

或者你说的是另一回事？@evolutionxbox好主意，我将处理一个

setAttribute（'hidden'，''）

和

removeAttribute（'hidden'）