C# 如何显示父DIV中的所有DIV

我有以下代码，这是我的

默认值。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>

在

页面加载期间，我正在从代码隐藏填充
GridView
。显示
这是一个测试#1
，但不显示
网格视图。当我进入
Developer Tools
时，我可以看到生成的表，但不知何故它被包装在一个DIV（
display:hidden
）中，我确信这是由上面的JQuery代码创建的

下面是它的外观：


我不确定为什么会有包含
6
的DIV，这些内容DIV中的所有
JQuery都在哪里

如何修改JQuery，以便在页面首次加载时，显示第一个
content
DIV中的任何内容（即使有多个）然后，如果我转到其他选项卡并返回到第一个选项卡，它仍然会显示。
原因是您隐藏了所有的子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>


$（文档）.ready（函数（）{
//隐藏所有子div！！甚至孙子div
$（“#content div”）.hide（）；//最初隐藏所有内容
$（“#tabs li:first”）.attr（“id”，“current”）；//激活第一个选项卡
//唯一的第一个孩子是不隐藏的
$（“#content div:first”）.fadeIn（）；//显示第一个选项卡内容
$（“#选项卡a”）。单击（功能（e）{
e、 预防默认值（）；
$（“#content div”）.hide（）；//隐藏所有内容
$（“#tabs li”）.attr（“id”，”；//重置id的
$（this）.parent（）.attr（“id”，“current”）；//激活此
//$（'#'+$（this.attr（'title'））.fadeIn（）；//显示当前选项卡的内容
$（$（this.attr（'href'））.fadeIn（）；
});
});

解决方案可以是：

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


$（文档）.ready（函数（）{
$（“#content div[id^='tab']）.hide（）；//最初隐藏所有内容
$（“#tabs li:first”）.attr（“id”，“current”）；//激活第一个选项卡
$（“#content div[id^='tab']：first”）.fadeIn（）；//显示第一个选项卡内容
$（“#选项卡a”）。单击（功能（e）{
e、 预防默认值（）；
$（“#content div”）.hide（）；//隐藏所有内容
$（“#tabs li”）.attr（“id”，”；//重置id的
$（this）.parent（）.attr（“id”，“current”）；//激活此
//$（'#'+$（this.attr（'title'））.fadeIn（）；//显示当前选项卡的内容
$（$（this.attr（'href'））.fadeIn（）；
});
});
原因是您隐藏了所有子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>


$（文档）.ready（函数（）{
//隐藏所有子div！！甚至孙子div
$（“#content div”）.hide（）；//最初隐藏所有内容
$（“#tabs li:first”）.attr（“id”，“current”）；//激活第一个选项卡
//唯一的第一个孩子是不隐藏的
$（“#content div:first”）.fadeIn（）；//显示第一个选项卡内容
$（“#选项卡a”）。单击（功能（e）{
e、 预防默认值（）；
$（“#content div”）.hide（）；//隐藏所有内容
$（“#tabs li”）.attr（“id”，”；//重置id的
$（this）.parent（）.attr（“id”，“current”）；//激活此
//$（'#'+$（this.attr（'title'））.fadeIn（）；//显示当前选项卡的内容
$（$（this.attr（'href'））.fadeIn（）；
});
});

解决方案可以是：

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


$（文档）.ready（函数（）{
$（“#content div[id^='tab']）.hide（）；//最初隐藏所有内容
$（“#tabs li:first”）.attr（“id”，“current”）；//激活第一个选项卡
$（“#content div[id^='tab']：first”）.fadeIn（）；//显示第一个选项卡内容
$（“#选项卡a”）。单击（功能（e）{
e、 预防默认值（）；
$（“#content div”）.hide（）；//隐藏所有内容
$（“#tabs li”）.attr（“id”，”；//重置id的
$（this）.parent（）.attr（“id”，“current”）；//激活此
//$（'#'+$（this.attr（'title'））.fadeIn（）；//显示当前选项卡的内容
$（$（this.attr（'href'））.fadeIn（）；
});
});

隐藏以下内容：

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

编辑：或者，找出在gridview周围渲染
的内容。默认情况下它与gridview一起提供吗

隐藏以下内容：

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

编辑：或者，找出在gridview周围渲染
的内容。默认情况下，它与gridview一起出现吗？
您只希望隐藏子代，而不是所有子代

尝试：

您还可以将show（）链接到它

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

您只想隐藏子代，而不是所有子代

尝试：

您还可以将show（）链接到它

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

$（“#content div:first”）.fadeIn（）然后在页面加载时显示内容中的第一个div。是的，但它是否也会在第一个
中淡出？Charlietfl的答案有效的原因是.children（）限制它只隐藏
内容
$（“#content div:first”）.fadeIn（）下的第一级
然后在页面加载时显示内容中的第一个div。是的，但它是否也会在第一个
中淡出？Charlietfl的答案有效的原因是.children（）限制它只隐藏
内容下的第一级