Javascript选项卡未正确激活
我有三个选项卡,它们的active/inactive类来自javascript代码。但是,当我单击第二个或第三个选项卡时,它会移动到第一个选项卡。看到我的代码了吗Javascript选项卡未正确激活,javascript,jquery,html,tabs,Javascript,Jquery,Html,Tabs,我有三个选项卡,它们的active/inactive类来自javascript代码。但是,当我单击第二个或第三个选项卡时,它会移动到第一个选项卡。看到我的代码了吗 $(document).ready(function () { $('ul.tabs1').each(function () { var $active, $content, $links = $(this).find('a'); $active = $($links.f
$(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();
});
});
});
同样的,也可以查看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";
}
}
我不是100%确定,但我认为你应该参考
e.target
,而不是this
:
$(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 = $(location.hash);
$active.addClass('active');
$content.show();
});
});
});
您还应该使用
e.preventDefault()
来停止默认的单击事件。就风格而言,我不建议使用$作为变量,因为它太接近jQuery$的用法,而且没有这样做的惯例。当我在JSFiddle@enigram中加载它时,我看不出有什么问题:我的选项卡处于活动状态,但它再次移动到第一个选项卡。几分钟后也可以看到我的回发代码。你能给我更新后的正确代码吗。当我在这里弄不清楚该用什么和不该用什么时,点击处理程序。你能在答案中更新吗,如果它起作用,我可以将它标记为答案:)你添加了e.preventDefault()
?现在我的相应选项卡变为活动状态,但相关数据没有出现
$(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 = $(location.hash);
$active.addClass('active');
$content.show();
});
});
});