使选项卡 Active/Inactive 未显示正确的数据

Question

首先，我有三个选项卡，它们根据我的要求显示了正确的和实际的数据，但问题是选项卡没有正确激活。

当我曾经单击 second 选项卡时。它正确显示了数据，但活动被移动到 first 选项卡。 active/inacive 是由 javascript 完成的。这是 JS 的代码：-

        $(document).ready(function () {
        $('ul.tabs1').each(function () {
            var $active, $content, $links = $(this).find('a');
            $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
            $active.addClass('active');
            $content = $($active[0].hash);
            $links.not($active).each(function () {
                $(this.hash).hide();
            });
            $(this).on('click', 'a', function (e) {
                $active.removeClass('active');
                $content.hide();
                $active = $(this);
                $content = $(this.hash);
                $active.addClass('active');
                $content.show();
            });
        });
    });

但是当我将 JS 代码从上面的 js 更改为下面的 js 时，我的活动工作正常但数据没有按照我的要求来。查看JS代码：-

$(document).ready(function () {
        $('ul.tabs1').each(function () {
            var $active, $content, $links = $(this).find('a');
            $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
            $active.addClass('active');
            $content = $($active[0].hash);
            $links.not($active).each(function () {
                $(this.hash).hide();
            });
            $(this).on('click', 'a', function (e) {
                e.preventDefault();
                $active.removeClass('active');
                $content.hide();
                $active = $(e.target);
                $content = $(e.target.hash);
                $active.addClass('active');
                $content.show();
            });
        });
    });

另见服务器代码和 html 相同

<ul class='tabs1'>
            <li><a href='#tab1' id="allNews" runat="server" onserverclick="allNews_ServerClick">All News</a></li>
            <li><a href='#tab2' id="forNgo" runat="server" onserverclick="forNgo_ServerClick">For NGO</a></li>
            <li><a href='#tab3' id="fromNgo" runat="server" onserverclick="fromNgo_ServerClick">From NGO</a></li>
        </ul>

代码隐藏

protected void ddlSortOrder_SelectedIndexChanged(object sender, EventArgs e)
    {
        using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultCSRConnection"].ConnectionString))
        {
            //string query = "SELECT dbo.tbl_post.Id, dbo.tbl_post.title, dbo.tbl_post.description, dbo.tbl_post.dateforPost, dbo.tbl_ngoname.ngo_name FROM dbo.tbl_post INNER JOIN dbo.tbl_ngoname ON dbo.tbl_post.NgoId = dbo.tbl_ngoname.Id WHERE DATEPART(YEAR,dbo.tbl_post.dateforPost) = " + ddlYear.SelectedValue + " ORDER BY dbo.tbl_post.dateforPost " + ddlSortOrder.SelectedValue;
            string query = "SELECT dbo.tbl_post.Id, dbo.tbl_post.title, dbo.tbl_post.description, dbo.tbl_post.dateforPost, dbo.tbl_ngoname.ngo_name FROM dbo.tbl_post INNER JOIN dbo.tbl_ngoname ON dbo.tbl_post.NgoId = dbo.tbl_ngoname.Id WHERE DATEPART(YEAR,dbo.tbl_post.dateforPost) = " + ddlYear.SelectedValue + " ORDER BY dbo.tbl_post.dateforPost " + ddlSortOrder.SelectedValue;
            SqlDataAdapter sda = new SqlDataAdapter(query, conn);
            DataTable dt = new DataTable();
            sda.Fill(dt);
            lstNews.DataSource = dt;
            lstNews.DataBind();
        }
    }

    protected void allNews_ServerClick(object sender, EventArgs e)
    {
        // set user type accordingly in all below methods
        using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultCSRConnection"].ConnectionString))
        {
            string query = "SELECT dbo.tbl_post.Id, dbo.tbl_post.title, dbo.tbl_post.description, dbo.tbl_post.dateforPost, dbo.tbl_ngoname.ngo_name, dbo.tbl_User.usertype FROM dbo.tbl_post INNER JOIN dbo.tbl_ngoname ON dbo.tbl_post.NgoId = dbo.tbl_ngoname.Id INNER JOIN dbo.tbl_User ON dbo.tbl_post.userId = dbo.tbl_User.Id where usertype != '2'";
            SqlDataAdapter sda = new SqlDataAdapter(query, conn);
            DataTable dt = new DataTable();
            sda.Fill(dt);
            lstNews.DataSource = dt;
            lstNews.DataBind();
          //  allNews.Attributes["class"] = "active";
        }
    }
    protected void forNgo_ServerClick(object sender, EventArgs e)
    {
        using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultCSRConnection"].ConnectionString))
        {
            string query = "SELECT dbo.tbl_post.Id, dbo.tbl_post.title, dbo.tbl_post.description, dbo.tbl_post.dateforPost, dbo.tbl_ngoname.ngo_name, dbo.tbl_User.usertype FROM dbo.tbl_post INNER JOIN dbo.tbl_ngoname ON dbo.tbl_post.NgoId = dbo.tbl_ngoname.Id INNER JOIN dbo.tbl_User ON dbo.tbl_post.userId = dbo.tbl_User.Id where usertype != '2'";
            SqlDataAdapter sda = new SqlDataAdapter(query, conn);
            DataTable dt = new DataTable();
            sda.Fill(dt);
            lstNews.DataSource = dt;
            lstNews.DataBind();
           // forNgo.Attributes["class"] = "active";
        }
    }
    protected void fromNgo_ServerClick(object sender, EventArgs e)
    {
        using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultCSRConnection"].ConnectionString))
        {
            string query = "SELECT dbo.tbl_post.Id, dbo.tbl_post.title, dbo.tbl_post.description, dbo.tbl_post.dateforPost, dbo.tbl_ngoname.ngo_name, dbo.tbl_User.usertype FROM  dbo.tbl_post INNER JOIN dbo.tbl_ngoname ON dbo.tbl_post.NgoId = dbo.tbl_ngoname.Id INNER JOIN dbo.tbl_User ON dbo.tbl_post.userId = dbo.tbl_User.Id where usertype = '2'";
            SqlDataAdapter sda = new SqlDataAdapter(query, conn);
            DataTable dt = new DataTable();
            sda.Fill(dt);
            lstNews.DataSource = dt;
            lstNews.DataBind();
           // fromNgo.Attributes["class"] = "active";
        }
    }

请指出我做错了什么。

更新列表视图代码:-

<asp:ListView ID="lstNews" runat="server" OnPagePropertiesChanging="lstNews_PagePropertiesChanging">
                    <LayoutTemplate>
                        <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <div class="Newsdiv">
                            <p class="Newspara"><a id="a1" runat="server" href='<%# string.Format("#{0}", Eval("Id")) %>' class="modal-popup"><%# Eval("title") %></a></p>
                            <p class="NewsDate">
                                News Posted:
                                <asp:Literal ID="Literal1" runat="server" Text='<%# string.Format("{0:MMM dd, yyyy - hh:mm:ss tt}", Eval("dateforPost")) %>'></asp:Literal>
                                &nbsp;&nbsp;&nbsp;<span class="label"><%# Eval("ngo_name") %></span>
                            </p>
                            <p class="NewsDate1"><a href='<%# Eval("title") %>'>Click here</a> to know more </p>
                        </div>
                        <div id='<%# Eval("Id") %>' class="popup">
                            <div class="popup-container">
                                <div class="popup-content">
                                    <div class="popup-close js-popup-close modal-close">X</div>
                                    <div>
                                        <p class="popup-para"><%# Eval("title") %></p>
                                    </div>
                                    <div style="padding: 7px;">
                                        <p class="NewsDate">
                                            News Posted:                                   
                                            <asp:Literal ID="Literal2" runat="server" Text='<%# string.Format("{0:MMM dd, yyyy - hh:mm:ss tt}", Eval("dateforPost")) %>'></asp:Literal>
                                        </p>
                                        <p class="SStorypara">
                                            <%# Eval("description") %>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                </asp:ListView>
                <div class="pagination">
                    <asp:DataPager ID="dpNews" runat="server" PagedControlID="lstNews" PageSize="3">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                                ShowNextPageButton="false" />
                            <asp:NumericPagerField ButtonType="Link" CurrentPageLabelCssClass="current-page" />
                            <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />
                        </Fields>
                    </asp:DataPager>

Answer 1

使用以下样式和 jquery 插件。

您可以使用 tabs-1、tabs-2 和 tabs-3

在每个选项卡内容（div 元素）上放置三个列表视图

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<div id="tabs">
    <ul>
        <li><a href="#allNews">Nunc tincidunt</a></li>
        <li><a href="#forNgo">Proin dolor</a></li>
        <li><a href="#fromNgo">Aenean lacinia</a></li>
    </ul>
    <div id="allNews">
        <asp:ListView ID="lstNews" runat="server" OnPagePropertiesChanging="lstNews_PagePropertiesChanging">
                <LayoutTemplate>
                    <asp:PlaceHolder ID="itemPlaceHolder" runat="server"></asp:PlaceHolder>
                </LayoutTemplate>
                <ItemTemplate>
                    <div class="Newsdiv">
                        <p class="Newspara"><a id="a1" runat="server" href='<%# string.Format("#{0}", Eval("Id")) %>' class="modal-popup"><%# Eval("title") %></a></p>
                        <p class="NewsDate">
                            News Posted:
                            <asp:Literal ID="Literal1" runat="server" Text='<%# string.Format("{0:MMM dd, yyyy - hh:mm:ss tt}", Eval("dateforPost")) %>'></asp:Literal>
                            &nbsp;&nbsp;&nbsp;<span class="label"><%# Eval("ngo_name") %></span>
                        </p>
                        <p class="NewsDate1"><a href='<%# Eval("title") %>'>Click here</a> to know more </p>
                    </div>
                    <div id='<%# Eval("Id") %>' class="popup">
                        <div class="popup-container">
                            <div class="popup-content">
                                <div class="popup-close js-popup-close modal-close">X</div>
                                <div>
                                    <p class="popup-para"><%# Eval("title") %></p>
                                </div>
                                <div style="padding: 7px;">
                                    <p class="NewsDate">
                                        News Posted:                                   
                                        <asp:Literal ID="Literal2" runat="server" Text='<%# string.Format("{0:MMM dd, yyyy - hh:mm:ss tt}", Eval("dateforPost")) %>'></asp:Literal>
                                    </p>
                                    <p class="SStorypara">
                                        <%# Eval("description") %>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:ListView>
            <div class="pagination">
                <asp:DataPager ID="dpNews" runat="server" PagedControlID="lstNews" PageSize="3">
                    <Fields>
                        <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                            ShowNextPageButton="false" />
                        <asp:NumericPagerField ButtonType="Link" CurrentPageLabelCssClass="current-page" />
                        <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />
                    </Fields>
                </asp:DataPager>
    </div>
    <div id="forNgo">

    </div>
    <div id="fromNgo">

    </div>
</div>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
    $(function () {
        $("#tabs").tabs();
    });
</script>

希望对您有所帮助。

使选项卡 Active/Inactive 未显示正确的数据

Making tab Active/Inactive is not showing the proper data

javascript

asp.net

jquery

tabs