首先， 我有三个选项卡，根据我的要求显示正确和实际的数据，但问题是标签没有正常运行。
我以前点击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";
}
}
请建议我做错了什么。
更新LISTVIEW代码： -
<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>
<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>
答案 0 :(得分：0)
使用以下样式和jquery插件。
您可以在每个标签内容（div元素）上添加三个列表视图，其中包含制表符-1，制表符-2和制表符3
<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>
<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>
希望这有帮助。