2

我有一个 Web 应用程序（ASP.NET2.0 C#）。在其中，我有一个 div，其中包含一个复选框列表和一个按钮。

我想切换 div 查看，所以我在网上找到了一些 javascript 代码来帮助我。

继承人的代码：

<script language="javascript">
var state = 'hidden';

function showhide(layer_ref) {

    if (state == 'visible') 
    {
        state = 'hidden';
    }
    else 
    {
        state = 'visible';
    }
    if (document.all) 
    { //IS IE 4 or 5 (or 6 beta)
        eval( "document.all." + layer_ref + ".style.visibility = state");
    }
    if (document.layers) 
    { //IS NETSCAPE 4 or below
        document.layers[layer_ref].visibility = state;
    }
    if (document.getElementById && !document.all) 
    {
        maxwell_smart = document.getElementById(layer_ref);
        maxwell_smart.style.visibility = state;
    }
}
</script>

我这样调用函数：

<a href="javascript://" onclick="showhide('AlertDiv');">Choose Columns</a>

当我使用此功能时，它会向我显示带有按钮的 div，但不会向我显示复选框列表......关于发生了什么的任何想法？

谢谢你。

4

2 回答 2

2

您是否尝试过使用显示而不是可见性？

例如，而不是：

document.getElementById(layer_ref).style.visiblity = "hidden";
document.getElementById(layer_ref).style.visiblity = "visible";

采用：

document.getElementById(layer_ref).style.display = "none";
document.getElementById(layer_ref).style.display = "block";

您必须将所有对可见性的引用替换为 display 而不仅仅是 getElementById 版本。您可能还想考虑使用jQuery来处理您的场景，只需几行代码，而且不需要 onclick 属性来覆盖您的 html。

<script type="text/javascript" src="jquery-1.3.2.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.toggleLink').click(function(e) {
       e.preventDefault();
       $('#AlertDiv').toggle();
    });
  });
</script>
<a href="#" class="toggleLink">Choose Columns</a>
于 2009-04-01T14:50:27.917 回答
2

一些建议：

  1. 您确实应该考虑使用ASP.NET AJAX或JQuery 之类的 javascript 库。这将有助于消除浏览器特定的代码。
  2. 可见性基于复选框的状态，而不仅仅是切换它。
  3. 在这种情况下，“显示”可能是比“可见性”更好的样式。如果你使用“可见性”，那么你只会得到一个空白区域，当它不可见时“层”应该是。
  4. 您可能希望传入 div 标签的 id 和复选框的 id，而不是“层引用”。

asp.net ajax 中的示例：

这将是您的复选框：

<input type="checkbox" id="mycheck" onclick='showhide("mycheck","mylayer")' />

这是您要显示/隐藏的区域：

<div id='mylayer'>content</div>

这是您的功能：

<script language="javascript">
function showhide(checkboxid, layerid)
{

    if($get(checkboxid).checked==true)
    {
         $get(layerid).display = "none";
    }
    else
    {
         $get(layerid).style.display = "";
    }
}
</script>
于 2009-04-01T14:53:23.853 回答