Javascript 显示或隐藏来自标签的div单击

我有三个标签，所有标签上都有以下代码，ID不同，三个div的ID不同

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

一些数据

我想制作一个显示或隐藏标签点击机制。有人能告诉我如何做到这一点吗？当我点击一个标签时，a特定的div应该显示，其他div应该隐藏，当我点击下一个标签时，它的corespondent 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> 

函数隐藏（span）{
var div=document.getElementById（“div_216;”+span.id）；
如果（div.style.display==“无”）
div.style.display=“块”；
其他的
div.style.display=“无”；
}

这是标签代码

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

---

在JQuery中使用这种方式：

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

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

});

$（“#”）点击（函数（）{
$（“#”）切换（）；
});

在JQuery中使用这种方式：

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

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

});

$（“#”）点击（函数（）{
$（“#”）切换（）；
});

您可以编写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>

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

标记：将所有

和

放入另一个

---

您可以编写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>

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

标记：将所有

和

放入另一个

---

这将很好：

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

id1

红色


id2

蓝色


id3

绿色
$（文档）.ready（函数（）{
$（“.clickLabel”）。单击（函数（）{
var div_id=“#div_”+$（this.attr（“id”）；
$（“.someclass”）.not（div_id）.css（“显示”、“无”）；
$（div_id）.css（“显示”、“块”）；
});
});

它可以正常工作：

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

id1

红色


id2

蓝色


id3

绿色
$（文档）.ready（函数（）{
$（“.clickLabel”）。单击（函数（）{
var div_id=“#div_”+$（this.attr（“id”）；
$（“.someclass”）.not（div_id）.css（“显示”、“无”）；
$（div_id）.css（“显示”、“块”）；
});
});

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

2） 使用对JavaScript函数的引用在标签上注册OnClientClick事件；肖希迪夫

3） 在JavaScript函数中，使用visible类隐藏所有div，并使用标签的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';
}

类似的东西…

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

2） 使用对JavaScript函数的引用在标签上注册OnClientClick事件；肖希迪夫

3） 在JavaScript函数中，使用visible类隐藏所有div，并使用标签的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';
}

---

类似这样的情况…

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

Sys.WebForms.PageRequestManager.getInstance（）.add_endRequest（AsyncPostback）
函数AsyncPostback（）{//在此处插入代码}
因为您的javascript代码在一次回发后无法运行

---

祝你好运

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

Sys.WebForms.PageRequestManager.getInstance（）.add_endRequest（AsyncPostback）
函数AsyncPostback（）{//在此处插入代码}
因为您的javascript代码在一次回发后无法运行

---

祝你好运

看，我把“ClietID”改为“ClientID”。这个语法错误会导致你在评论中输入的错误。什么都没有，当用户点击标签并切换DIV时会执行此代码。只需将此代码添加到脚本标记中，但其他DIV将如何切换？你想切换更多DIV吗？因此，请使用更好的选择器，如$（“div”）.toggle（）；或$（“div.classDIV”）.toggle（）；看，我把“ClietID”改为“ClientID”。这个语法错误会导致你在评论中输入的错误。什么都没有，当用户点击标签并切换DIV时会执行此代码。只需将此代码添加到脚本标记中，但其他DIV将如何切换？你想切换更多DIV吗？因此，请使用更好的选择器，如$（“div”）.toggle（）；或$（“div.classDIV”）.toggle（）；是的，它将所有标签都加粗，但在我单击“下一步”时不会将它们变为正常label@user1099825-伙计！我得走了。请仔细检查您的代码，在if block-childDiv[i]中输入警报。标记名==“SPAN”为了测试这个表达式。好的，当然，非常感谢mych的上述所有内容。但是当你回来时，请回答警报dnt显示你说要检查的地方是的，它将所有标签都加粗，但当我单击“下一步”时，不会将其转为正常label@user1099825-伙计！我得走了。请仔细检查您的代码，在if block-childDiv[i]中输入警报。tagName==“SPAN”来测试该表达式。好的，当然，非常感谢mych所做的上述工作。但当您回来时，请回答警报dnt显示您要检查的位置