切换div的能见度与一个框名单

Question

我有一个网应用程序(ASP。NET2.0C#)。在这，我有一个div包含一个框列表和一个按钮。

我想切换div视，因此我得到了一些javascript code在线帮助我。

这里的代码:

<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与按钮，但它并不显示我"checkboxlist"....任何想法什么？

谢谢你。

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

您必须更换显示器不仅仅是版本的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

一些建议：

1. 你真的应该考虑使用javascript库喜欢 ASP.NET 阿贾克斯 或 JQuery.这将有助于让浏览器的特定代码的方式。
2. 基地的可见性国家的框，而不仅仅是翻转它。
3. "显示"可能是一个更好的风格，在这种情况，而不是"可见度".如果您使用的"可见度"然后，你将只是一个空白的地区"层"应当它是看不见的。
4. 而不是一个"层参考"你可能想通过在div标记和编号的选项。

例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>