如何显示父DIV里面的所有的div [英] How to display ALL the divs inside a parent DIV

问题描述

我有以下的code这是我的 Default.aspx的：

I have the following code which is my Default.aspx:

<div style="padding-left: 10px; padding-top: 10px;">
    <asp:BulletedList ID="tabs" ClientIDMode="Static" runat="server" DisplayMode="HyperLink">
        <asp:ListItem Text="Status" Value="#tab1"></asp:ListItem>
        <asp:ListItem Text="Your Tasks" Value="#tab2"></asp:ListItem>
        <asp:ListItem Text="Messages" Value="#tab3"></asp:ListItem>
        <asp:ListItem Text="Dependencies" Value="#tab4"></asp:ListItem>
        <asp:ListItem Text="Documents" Value="#tab5"></asp:ListItem>
        <asp:ListItem Text="Pro-Forma" Value="#tab6"></asp:ListItem>
        <asp:ListItem Text="Admin Controls" Value="#tab7"></asp:ListItem>
    </asp:BulletedList>

    <asp:Panel ID="content" runat="server" ClientIDMode="Static">
        <asp:Panel ID="tab1" ClientIDMode="Static" runat="server">THIS IS A TEST #1
            <asp:GridView ID="yourTasksGV" runat="server" ClientIDMode="Static" EmptyDataText="There is no data to display">
            </asp:GridView>
        </asp:Panel>
        <asp:Panel ID="tab2" ClientIDMode="Static" runat="server">THIS IS A TEST #2
        </asp:Panel>
        <asp:Panel ID="tab3" ClientIDMode="Static" runat="server">THIS IS A TEST #3</asp:Panel>
        <asp:Panel ID="tab4" ClientIDMode="Static" runat="server">THIS IS A TEST #4</asp:Panel>
        <asp:Panel ID="tab5" ClientIDMode="Static" runat="server">THIS IS A TEST #5</asp:Panel>
        <asp:Panel ID="tab6" ClientIDMode="Static" runat="server">THIS IS A TEST #6</asp:Panel>
        <asp:Panel ID="tab7" ClientIDMode="Static" runat="server">THIS IS A TEST #7</asp:Panel>
    </asp:Panel>
</div>

的标签和内容由JQuery的控制：

The tabs and contents are controlled by JQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $("#content div").hide(); // Initially hide all content
        $("#tabs li:first").attr("id", "current"); // Activate first tab
        $("#content div:first").fadeIn(); // Show first tab content

        $('#tabs a').click(function (e) {
            e.preventDefault();
            $("#content div").hide(); //Hide all content
            $("#tabs li").attr("id", ""); //Reset id's
            $(this).parent().attr("id", "current"); // Activate this
            //$('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
            $($(this).attr('href')).fadeIn();
        });
    });
</script>

我从后面code在的Page_Load 填充 GridView控件。在这是测试＃1 显示，但没有显示 GridView控件。当我去到开发工具我可以看到这是生成的表，但不知何故它是一个DIV（内回绕显示：隐藏），这我肯定是由JQuery的code上面创建的。

I am populating the GridView from code behind during Page_Load. The THIS IS A TEST #1 is displayed but the GridView is not shown. When I go in to the Developer Tools I can see the Table which was generated but somehow it is wrapped within a DIV (display: hidden) which I am sure was created by the JQuery code above.

下面是什么样子：

我不知道为什么会有与 6 从创建DIV哪里会有那些 JQuery的###### ############# 这些内容DIV？

I am not sure why there is the DIV with the 6 is created from and where are there all those JQuery################### in those contents DIV?

我如何修改JQuery的，这样，当第一次加载页面，第一个里面内容什么显示 DIV（即使有数倍），然后，如果我走了其他选项卡，并配备回到它仍然显示的第一个标签。

How can I modify the JQuery so that when the page first loads, anything inside the first content DIV is shown (even if there are multiples) and then if I go to the other tabs and comes back to the first tab it is still displayed.

推荐答案

您只希望孩子们隐藏的，并不是所有后代＆LT; D​​IV＆GT;

You only want the children hidden , not all descendent <div>

尝试：

$("#content").children().hide();

和您可以链接你的节目（）把它也

And you can chain your show() to it also

$("#content").children().hide().first().show();

这篇关于如何显示父DIV里面的所有的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！