Question

我有3个单独的div（在aspx页面中并使所有3个div可见=“false”）。

根据条件，我必须一次显示1个div并重新显示两个div来隐藏

我正在javascript中将1 div作为style.visibility = "block";，其他2 div作为Style.Add("display", "none");

运行它时

将错误信息抛出为：

无法获取属性'style'的值：object为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();

无法使用javascript隐藏/显示div面板

2 个答案: