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应该显示，其他人应该隐藏，当我点击下一个标签时它的coresspondent 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>

这里是lablel代码

<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：function hideDiv（）将display:none设置为所有子div。

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

Answer 2

在JQuery中使用这种方式：

$("#<%= CA.ClientID %>").click(function(){

    $("#<%= DIV_CA.ClientID %>").toggle();

});

Answer 3

一切正常：

<asp:Label CssClass="clickLabel" Text="text" ID="id1" runat="server" ClientIDMode="Static">id1</asp:Label><br/>
<div id="div_id1" class="someclass" style="color:Red; display:none;">red</div>
<br/>
<asp:Label CssClass="clickLabel" Text="text" ID="id2" runat="server" ClientIDMode="Static">id2</asp:Label><br/>
<div id="div_id2" class="someclass" style="color:blue; display:none;">blue</div>
<br/>

<asp:Label CssClass="clickLabel" Text="text" ID="id3" runat="server" ClientIDMode="Static">id3</asp:Label><br/>
<div id="div_id3" class="someclass" style="color:green; display:none;">green</div>

<script type="text/javascript">
    $(document).ready(function () {
        $(".clickLabel").click(function () {
            var div_id = "#div_" + $(this).attr("id");
            $(".someclass").not(div_id).css("display", "none");
            $(div_id).css("display", "block");
        });
    });
</script>

Answer 4

1）创建两个CSS类; divClass和divVisible。一个用于所有div，另一个用于可见div。

2）使用对JavaScript函数的引用在Label上注册OnClientClick事件; showHideDiv。

3）在JavaScript函数中，隐藏具有可见类的所有div，并使用Label的ID查找并显示正确的div。

function showHideDiv(el)
{
  var id = el.getAttribute('id');
  var div = document.getElementById('DIV_' + id);
  var hideVisibleDiv = document.getElementsByClassName('divVisible');

  for(var e in hideVisibleDiv)
  {
    hideVisibleDivs[e].className = 'divClass';
  }
  div.className = 'divClass divVisible';
}

像这样......

Answer 5

如果您在页面中使用更新面板，则必须使用此代码来获取原因：

Sys.WebForms.PageRequestManager.getInstance（）add_endRequest（AsyncPostback）。
function AsyncPostback（）{//在此处插入代码};
因为你的javascript代码在一次回发后无法运行。
祝你好运！

显示或隐藏标签中的div单击

5 个答案: