顯示或隱藏子div

嗨，大家可以有人請指導我如何隱藏另一個div標籤內的div？我使用JavaScript ...這是我到目前爲止有：顯示或隱藏子div

function hideShowQuestionDivs() { 

    var drpQuestions = document.getElementById('<%= drpNumQuestions.ClientID %>'); 
    if (drpQuestions.selectedIndex == 0) { 
     document.getElementById('one').parentNode.removeChild; 
     document.getElementById('2').style.display = 'none'; 
     document.getElementById('3').style.display = 'none'; 
    } 

    if (drpQuestions.selectedIndex == 1) { 
     document.getElementById('2').style.display = 'none'; 
     document.getElementById('3').style.display = 'none'; 
    } 

    if (drpQuestions.selectedIndex == 2) { 
     document.getElementById('3').style.display = 'none'; 
    } 
}

這是HTML的一個例子：

<asp:UpdatePanel ID="upEntryScreen" runat="server"> 
     <ContentTemplate> 
      <div id="divEntryMain"> 
       <br class="style13" /> 
       <span class="style13"> 
       <tr> 
        <th> 
        </th> 
       </tr> 
       </span> 
       <asp:Label ID="lblCampaignType" runat="server" CssClass="style13" 
        Text="Campaign Type"></asp:Label> 
       <span class="style13"> 
       </th> 
       <th> 
       </th> 
       </span> 
       <uc:ROSDropDown ID="drpCampaignType" runat="server" CssClass="style13" 
        onchange="javascript:hideOrShowBuilderDiv()" Width="140"> 
       </uc:ROSDropDown> 
       <span class="style13"> 
       </th> 
       </tr> 
       <tr> 
        <th> 
        </th> 
       </tr> 
       </span> 
       <asp:Label ID="lblCampaignDockTemplate" runat="server" CssClass="style13" 
        Text="Campaign Docket Template"></asp:Label> 
       <span class="style13"> 
       </th> 
       <th> 
       </th> 
       </span> 
       <uc:ROSDropDown ID="drpListCampaignDocketTemplate" runat="server" 
        CssClass="style13" onchange="javascript:hideOrShowBuilderDiv()" Width="100"> 
       </uc:ROSDropDown> 
       <span class="style13"> 
       </th> 
       </tr> 
       <tr> 
        <th> 
        </th> 
       </tr> 
       </span> 
       <asp:Button ID="btnCancel" runat="server" CssClass="style11" Text="Cancel" 
        Width="100" /> 
       <asp:Button ID="btnCreate" runat="server" CssClass="style11" Text="Create" 
        Width="100" /> 
       <span class="style13"> 
       </th> 
       </tr> 
       </span> 
      </div> 
      <div id="divBuilderMain"> 
       <table> 
        <tr> 
         <td class="style4" valign="top"> 
          <div id="left"> 
           <table> 
            <tr> 
             <th class="style6"> 
              &nbsp;</th> 
             <th class="style7"> 
              &nbsp;</th> 
            </tr> 
            <tr> 
             <th class="style6"> 
              <asp:Label ID="lblCampStatus" runat="server" CssClass="style13" Font-Size="7pt" 
               Text="Set Campaign Status"></asp:Label> 
             </th> 
             <th class="style7"> 
              <asp:RadioButtonList ID="rdbCampStatus" runat="server" CellPadding="0" 
               CellSpacing="0" Font-Size="7pt" Height="16px" 
               Style="margin-left: 33px; text-align: justify;"> 
               <asp:ListItem>Inactive</asp:ListItem> 
               <asp:ListItem>Active</asp:ListItem> 
              </asp:RadioButtonList> 
             </th> 
            </tr> 
            <tr> 
             <th class="style6"> 
              <asp:Label ID="lblCreatedBy" runat="server" CssClass="style13" Font-Size="7pt" 
               Text="Created By"></asp:Label> 
             </th> 
             <th> 
              <asp:TextBox ID="txtCreatedBy" runat="server" CssClass="style13" 
               Font-Size="7pt" Width="100"></asp:TextBox> 
             </th> 
            </tr> 
            </div> 
    <div id="one"> 
    <tr> 
             <th class="style6"> 
              <asp:Label ID="lblCampType" runat="server" CssClass="style13" Font-Size="7pt" 
               Text="Campaign Type"></asp:Label> 
             </th> 
             <th> 
              <uc:ROSDropDown ID="drpCampType" runat="server" CssClass="style13" 
               Font-Size="7pt" Width="100"> 
              </uc:ROSDropDown> 
             </th> 
            </tr> 
            <tr> 
             <th class="style6"> 
              <asp:Label ID="lblCampDockTemplate" runat="server" CssClass="style13" 
               Font-Size="7pt" Text="Campaign Dock Template"></asp:Label> 
             </th> 
             <th> 
              <uc:ROSDropDown ID="drpCampDockTemplate" runat="server" CssClass="style13" 
               Font-Size="7pt" Width="100"> 
              </uc:ROSDropDown> 
             </th> 
            </tr> 
            <tr> 
             <th class="style19" colspan="2"> 
              &nbsp;</th> 
            </tr> 
            <tr> 
             <th class="style19" colspan="2"> 
              Store/Docket Fields 
             </th> 
            </tr> 
            <tr> 
             <th class="style6"> 
              <asp:Label ID="lblStoreDescription" runat="server" CssClass="style13" 
               Font-Size="7pt" Text="Store Description"></asp:Label> 
             </th> 
             <th> 
              <asp:TextBox ID="txtStoreDescription" runat="server" CssClass="style13" 
               Font-Size="7pt" Width="100"></asp:TextBox> 
             </th> 
            </tr> 
    </div>

來源

2011-06-07 johnnie

你也應該發佈一些HTML。 – DanielB 2011-06-07 07:30:48

你能顯示html標記嗎？ – jimy 2011-06-07 07:31:22

我已編輯顯示html ..謝謝 – johnnie 2011-06-07 07:34:58

這是你如何隱藏子DIV

$('#parentDivID > #childDivID').hide();

，這是你可以展示孩子的div

$('#parentDivID > #childDivID').show();

確保你的頁面中包含了jquery腳本..

基本上你需要選擇你需要隱藏/顯示的元素，並且在jquery中你可以使用CSS選擇器來做到這一點。然後調用它們上的.show（）或.hide（）方法

來源

2011-06-07 07:52:16 codeAnand

顯示或隱藏子div

回答

相關問題