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的visibility属性。我做了一些研究，发现我为什么要这样做。然而弹出框没有出现。

Answer 1

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

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

Answer 2

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

首先，确保将JS放在文档的头部，身体上方。

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

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

第三，我建议使用'display'属性vs'visibility'。

另外，我提供了一个简单的切换功能，可以更好地适用于您的应用程序。

希望这有帮助！

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";
    }
}

Javascript，CSS：显示隐藏的div不工作？

2 个答案: