顯示或隱藏的div點擊

我有所有如下因素代碼不同的ID和三個div的不同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 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代碼從標籤點擊製作顯示或隱藏機制任何人都可以告訴我，我怎樣才能做到這一點，當我點擊一個標籤，然後一個特定的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;

來源

2012-01-07 Adeel Aslam

你可以編寫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>

來源

2012-01-07 10:27:37 adatapost

好的檢查更新 – 2012-01-07 10:55:49

是的它使所有的標籤大膽，但當我點擊下一個標籤時沒有把它們變成正常 – 2012-01-07 13:14:57

YEs我已經複製了上面的代碼 – 2012-01-07 13:17:30

使用這種方式的JQuery：

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

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

});

來源

2012-01-07 10:24:50

我修好了，對不起 – 2012-01-07 10:35:08

看，我把「ClietID」改成了「ClientID」。這個語法錯誤會導致你在你的評論中出現的錯誤。 – 2012-01-07 10:42:22

沒有什麼，當用戶點擊標籤並切換DIV時執行此代碼，只需將此代碼添加到腳本標記 – 2012-01-07 10:49:49

這將是正常工作：

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

來源

2012-01-07 10:32:16 MDP

NOt wroking爵士 – 2012-01-07 10:45:22

它工作fine.try新版本。它有更多的細節:) – MDP 2012-01-07 11:00:20

1）創建兩個CSS類; divClass和divVisible。一個是所有的divs，另一個是可見的div。

2）通過引用JavaScript函數在標籤上註冊一個OnClientClick事件; showHideDiv。

3）在JavaScript函數中，隱藏所有具有可見類的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'; 
}

類似的東西...

來源

2012-01-07 10:34:15 Marle1

，如果你在你的頁面中使用更新面板必須使用此代碼獲取原因：

Sys.WebForms.PageRequestManager.getInstance（）add_endRequest。（AsyncPostback）;
函數AsyncPostback（）{//在這裏插入你的代碼};
因爲您的JavaScript代碼在一次回發後無法運行。
祝你好運！

來源

2012-01-07 12:28:19

顯示或隱藏的div點擊

回答

相關問題