javascript - 从标签中显示或隐藏 div 单击

Question

我有三个标签，每个标签都具有不同的 id 和三个具有不同 id 的 div 上的代码

<asp:Label ID="CA" runat="server"  Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="var b = ChangeColorCA(); this.style.cursor='pointer'; return b" onmouseout="RemoveColorCA()"></asp:Label>&nbsp;

这里是所有的div代码

<div id="DIV_CA" runat=server align="center" visible="false" style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto;">Some data</div>

我想从标签点击中显示或隐藏机制 谁能告诉我我该怎么做，当我点击一个标签时，一个特定的 div 应该显示，而其他的应该隐藏，当我点击下一个标签时，它的 corresspondent div 应该显示。

更新这是我的脚本代码

<script type="text/javascript">
  function hideshow(span) {
    var div = document.getElementById("DIV_" + span.id);
    if (div.style.display == "none")
       div.style.display = "block";
    else
       div.style.display = "none";
    }
</script> 

这是标签代码

<asp:Label ID="CA" runat="server"  Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="var b = ChangeColorCA(); this.style.cursor='pointer'; return b" onmouseout="RemoveColorCA()" onclick="hideshow(this)"  ></asp:Label>&nbsp;

Answer 1

您可以编写 JavaScript。

标记:

<asp:Label ID="CA" 
               runat="server"
               onclick="hideshow(this)"
               Text="Label">
</asp:Label>
<div id="DIV_CA" 
     runat=server 
     align="center"  
     style="background-color:#f3f3f3; text-align:
            left; width: 500px; height: 470px; overflow:auto; display:none;">
         Some data
</div>

JavaScript:

 function hideshow(span) {
    var div = document.getElementById("DIV_" + span.id);
    if (div.style.display == "none")
       div.style.display = "block";
    else
       div.style.display = "none";
    }

编辑:隐藏所有 div 并显示特定 div。

标记:把所有<asp:Label/>和 <div>在另一个里面 <div/>

 <div id="allDiv">
        <asp:Label ID="CA" runat="server"  Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="this.style.cursor='pointer'; "   onclick="hideshow(this)"></asp:Label>
        <asp:Label ID="CB" runat="server"  Font-Bold="False" Font-Names="Arial" Font-Size="10pt" style="padding-top:6px;" ForeColor="#CCCCCC" Height="100%" Text="Current Activities" onmouseover="this.style.cursor='pointer'; "   onclick="hideshow(this)"></asp:Label>
        <div id="DIV_CA" runat="server" align="center"  style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto; display:none;">Some data1</div>
        <div id="DIV_CB" runat="server" align="center"  style="background-color:#f3f3f3; text-align: left; width: 500px; height: 470px; overflow:auto; display:none;">Some data2</div>
</div>

JavaScript:函数 hideDiv() 设置 display:none给所有子分区。

<script type="text/javascript">
    function hideshow(span) {
        hideDiv();
        span.style.fontWeight = "bold";
        var div = document.getElementById("DIV_" + span.id);
        if (div.style.display == "none")
            div.style.display = "block";
        else
            div.style.display = "none"; 
    }
    function hideDiv() {
        var childDiv = document.getElementById("allDiv").childNodes;
        for (i = 0; i < childDiv.length; i++) {
            if (childDiv[i].tagName == "DIV") {
                childDiv[i].style.display = "none";
            }
            if (childDiv[i].tagName == "SPAN") {
                childDiv[i].style.fontWeight = "normal";
            }
        }
    }
</script>