javascript - Javascript，CSS：显示隐藏的 div 不起作用？

Question

我知道这是一个被问了一百次的问题，但我不明白为什么它在我的网站上不起作用。

Javascript：

<script>
  function show(boxid){
    document.getElementById(boxid).style.visibility="visible";
  }

  function hide(boxid){
    document.getElementById(boxid).style.visibility="hidden";
  }
</script>

HTML（PHP 生成）：

echo '<div id="selectedBookingActionLink">';
  echo '<a href="#" onClick="show(cancelPopUp)">Cancel</a>';
echo '</div>';

echo '<div id="cancelPopUp">';
  echo '<div class="question">Cancel?</div>';
  echo '<div class="answer">Yes</div>';
  echo '<div class="answer">No</div>';
echo '</div>';

CSS：

#cancelPopUp
{
  width: 260px;
  height: 80px;
  visibility: hidden;
}

如您所见，当用户单击“取消”链接时，我正在尝试更改 cancelPopUp div 的可见性属性。我做了一些研究，发现我为什么这样做应该有效。但是弹出框没有出现。

Answer 1

show将 div 的 ID 传递给函数时需要使用引号：

echo '<a href="#" onClick="show(\'cancelPopUp\')">Cancel</a>';

Answer 2

我在这里发布了您的代码的工作版本→ http://jsfiddle.net/matbloom/uHQsd/

1. 首先，确保您已将 JS 定位在文档的头部，在正文上方。

2. 其次，不要忘记在 onClick 中添加单引号。

   <a href="#" onClick="show('cancelPopUp')">Cancel</a>
   

3. 第三，我建议使用“显示”属性与“可见性”。

此外，我还提供了一个简单的切换功能，它可能更适合您的应用程序。

希望这可以帮助！

HTML：

<div id="selectedBookingActionLink"> 
    <a href="#" onClick="show('cancelPopUp')">Cancel</a>
</div>

<div id="cancelPopUp" style="display:none;">
    <div class="question">Cancel?</div>
    <div class="answer">Yes</div>
    <div class="answer">No</div>
</div>

CSS：

#cancelPopUp {
    width: 260px;
    height: 80px;
}

JS：

function show(boxid) {
    document.getElementById(boxid).style.display = "block";
}

function hide(boxid) {
    document.getElementById(boxid).style.display = "none";
}

/* Optional toggle function */
function toggle(boxid) {
    var e = document.getElementById(boxid);
    if (e.style.display == "block") {
        e.style.display = "none";
    } else { 
        e.style.display = "block";
    }
}