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>

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

这是它的样子：

enter image description here

我不确定为什么有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();

编辑：或者，找出在gridview周围呈现<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>

如何在父DIV中显示所有div

3 个答案: