無法使用javascript隱藏/顯示div面板

Question

我有3個單獨的div（在aspx頁中，並使所有3個div都可見=“ false”）。

根據條件，我必須一次顯示1個div並保留兩個div才能隱藏

我在用javascript作style.visibility = "block"; 1 div作為style.visibility = "block"; 和另外2個div到Style.Add("display", "none");

在運行時，它會拋出錯誤消息：

無法獲取屬性'style'的值：對象為null或未定義

下面是aspx代碼：

 <div runat="server" id="div1" visible="false">
 ..
 </div>

 <div runat="server" id="div2" visible="false">
 ..
 </div>
 <div runat="server" id="div3" visible="false">
 ..
 </div>

 $(document).ready(function () {
    var val =  "xx1" (or "xx2" or"xx3")
  switch (val) {
     case "xx1":
     document.getElementById('ctl00_ContentPlaceHolder2_div1').Style.Add("display", "none");
       // document.getElementById('ctl00_ContentPlaceHolder2_div1').style.visibility = "hidden";
    document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "block";
    //document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "visible";
    document.getElementById('ctl00_ContentPlaceHolder2_div3').Style.Add("display", "none");
    case "xx2":
     document.getElementById('ctl00_ContentPlaceHolder2_div1').Style.Add("display", "block");
    document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "none";
    document.getElementById('ctl00_ContentPlaceHolder2_div3').Style.Add("display", "none");
    case "xx3":
     document.getElementById('ctl00_ContentPlaceHolder2_div1').Style.Add("display", "none");
    document.getElementById('ctl00_ContentPlaceHolder2_div2').style.visibility = "none";
    document.getElementById('ctl00_ContentPlaceHolder2_div3').Style.Add("display", "block");

});

Answer 1

不要做visible="false" 。 當您執行此操作時，根本不會呈現任何客戶端控件-它不存在。

相反，如果您想隱藏它，但仍將其提供給客戶端代碼使用，

<div runat="server" id="div1" style="display:none">
 ..
</div>

要么

<div runat="server" id="div1" style="visibility:hidden">
 ..
</div>

取決於您要如何隱藏它。

之后，您的客戶端代碼將能夠找到並操縱它。

事實-如果您不需要訪問服務器上的這些DIV，則可以完全刪除runat="server"屬性。 獎勵：不變的DIV ID（您可以使用'div1'代替'ctl00_ContentPlaceHolder2_div1' ）

Answer 2

可見性的正確語法是：

document.getElementById("myP").style.visibility="hidden";

但是您可以使用jQuery：

    $("#YourSelector").hide();

    $("#YourSelector").show();