在 HTML 中显示/隐藏 UI 元素的问题答案

【问题标题】：Problem showing/hiding UI elements in HTML在 HTML 中显示/隐藏 UI 元素的问题
【发布时间】：2019-01-19 05:05:22
【问题描述】：

我编写了一些 HTML 来在单击按钮时显示/隐藏一些 UI。我希望在页面加载时隐藏 UI，并在单击“显示 UI”按钮时显示。

以下 HTML 几乎可以工作：

function showHide(thingToHide, thingToShow) {
  document.getElementById("status").innerHTML = "Shown";
  if (thingToHide == "showUI") {
    document.getElementById("status").innerHTML = "Hidden";
  }
  document.getElementById(thingToHide).style.visibility = "hidden";
  document.getElementById(thingToShow).style.visibility = "visible";
}

<div id="hideUI">
  <input id="showButton" type="button" onclick="showHide('hideUI', 'showUI');" value="Show UI" />
</div>

<div id="showUI">
  <input id="hideButton" type="button" onclick="showHide('showUI', 'hideUI');" value="Hide UI" />
  <p> Various UI goes here</p>
</div>
<p id="status">Start</p>

但是，“showUI” div 在页面首次显示时是可见的。如果我在该 div 中将初始可见性设置为隐藏，当我单击“显示 UI”按钮并尝试使其可见时，它不会按预期显示。

<div id="showUI" style="visibility: hidden;">

【问题讨论】：

Show/hide 'div' using JavaScript的可能重复

标签： javascript html

【解决方案1】：

您只需要在脚本中调用一次该函数。参见下面的代码，我在声明函数后调用了showHide('show', 'hideUI');。

function showHide(thingToHide, thingToShow) {
  document.getElementById("status").innerHTML = "Shown";
  if (thingToHide == "showUI") {
    document.getElementById("status").innerHTML = "Hidden";
  }
  document.getElementById(thingToHide).style.visibility = "hidden";
  document.getElementById(thingToShow).style.visibility = "visible";
}
showHide('showUI', 'hideUI');

<div id="hideUI">
  <input id="showButton" type="button" onclick="showHide('hideUI', 'showUI');" value="Show UI" />
</div>

<div id="showUI">
  <input id="hideButton" type="button" onclick="showHide('showUI', 'hideUI');" value="Hide UI" />
  <p> Various UI goes here</p>
</div>
<p id="status">Start</p>

【讨论】：

【解决方案2】：

你需要执行 showHide('hideUI', 'showUI');加载页面时。以下 Javascript 应该可以工作：

function showHide(thingToHide, thingToShow) {
  document.getElementById("status").innerHTML = "Shown";
  if (thingToHide == "showUI") {
    document.getElementById("status").innerHTML = "Hidden";
  }
  document.getElementById(thingToHide).style.visibility = "hidden";
  document.getElementById(thingToShow).style.visibility = "visible";
}
showHide('hideUI', 'showUI');

【讨论】：

【解决方案3】：

我的原始代码的问题是 javascript 函数在 div 之前。如果我将 div showUI 的可见性设置为隐藏在 HTML 中，并将 javascript 移动到 div 的 HTML 之后，它会按需要工作。

【讨论】：

【解决方案4】：

这可能就是您想要的。它将按钮保持在同一个位置。

HTML

<input id="Button" type="button" onclick="showHide('UI');" value="Show UI" />
<div id="UI" style="visibility: hidden">
    <p> Various UI goes here</p>
</div>
<p id="status">Start</p>

function showHide(UI) {
  if (document.getElementById(UI).style.visibility === 'hidden') {
    document.getElementById("status").innerHTML = "Shown";
    document.getElementById(UI).style.visibility = "visible";
    document.getElementById('Button').value = 'Hide UI'
  } else {
    document.getElementById("status").innerHTML = "Hidden";
    document.getElementById(UI).style.visibility = "hidden";
    document.getElementById('Button').value = 'Show UI'
  }

【讨论】：