如何显示父 DIV 中的所有 div

Question

我有以下代码，这是我的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>

tabs 和 contents 由 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>

我在Page_Load 期间从后面的代码填充GridView。 THIS IS A TEST #1 显示，但 GridView 未显示。当我进入Developer Tools 时，我可以看到生成的表，但不知何故它被包装在一个 DIV (display: hidden) 中，我确信它是由上面的 JQuery 代码创建的。

这是它的样子：

我不确定为什么会有带有 6 的 DIV 是从哪里创建的，这些内容 DIV 中的所有 JQuery################### 是从哪里来的？

如何修改 JQuery 以便在页面首次加载时显示第一个 content DIV 中的任何内容（即使有多个），然后如果我转到其他选项卡并返回第一个选项卡它仍然显示。

Answer 1

$("#content div").hide()

隐藏以下内容：

<div id="content">
   <div>
      <!-- will be hidden -->
      <div>
         <!-- will also be hidden -->
         <div>
         <!-- will also also be hidden -->
         ... and so on
         </div>
      </div>           
   </div>
</div>

您可能希望为所有选项卡级别的<asp:Panel> 元素分配一个公共类，并做一些更接近

$('.myTabClass').hide();

编辑：或者，找出在网格视图周围呈现<div> 的内容。是否默认带有gridview？

Answer 2

您只想隐藏孩子，而不是所有后代<div>

试试：

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

你也可以将你的 show() 链接到它

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

Answer 3

原因是因为您隐藏了所有子 div，然后淡入了唯一的第一个子 div。

<script type="text/javascript">
    $(document).ready(function () {

        // HIDES ALL CHILD DIVS!!  EVEN GRANDCHILD DIVS
        $("#content div").hide(); // Initially hide all content
        $("#tabs li:first").attr("id", "current"); // Activate first tab

        // ONLY FIRST CHILD IS UNHIDDEN
        $("#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>

修复可能是：

<script type="text/javascript">
    $(document).ready(function () {
        $("#content div[id^='tab']").hide(); // Initially hide all content
        $("#tabs li:first").attr("id", "current"); // Activate first tab
        $("#content div[id^='tab']: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>