Question

我已经编写了一些HTML以在单击按钮时显示/隐藏一些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;">

Answer 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>

Answer 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');

Answer 3

我的原始代码存在的问题是javascript函数位于div之前。如果我将div showUI的可见性设置为在HTML中隐藏，并且将javascript移至div的HTML之后，则它会按预期工作。

Answer 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>

JS

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'
  }

在HTML中显示/隐藏UI元素时出现问题

4 个答案: