Question

我有一个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，但它没有显示复选框列表....有关正在发生什么的任何想法？

谢谢。

Answer 1

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

例如，而不是：

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

您必须将所有对visiblity的引用替换为不仅显示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>

Answer 2

一些建议：

你真的应该考虑使用像ASP.NET AJAX或JQuery这样的javascript库。这将有助于将浏览器特定代码排除在外。
将可见性基于复选框的状态，而不仅仅是切换它。
“display”在这种情况下可能是更好的风格，而不是“可见性”。如果您使用“可见性”，那么当它不可见时，您将获得一个空白区域，其中“图层”应该是。
您可能希望传入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>

使用复选框列表切换div可见性

2 个答案: