Javascript标签未正确激活

极客

我有三个标签,其活动/非活动类来自javascript代码。但是,当我单击第二个或第三个选项卡时,它将移至第一个选项卡。看我的代码

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

每当我单击secondthird选项卡时,它就会再次移至第一个选项卡。

更新

回发页面加载代码:-

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            HtmlAnchor HA = new HtmlAnchor();
            HA.ServerClick += new EventHandler(allNews_ServerClick);

            HtmlAnchor HA2 = new HtmlAnchor();
            HA2.ServerClick += new EventHandler(forNgo_ServerClick);

            HtmlAnchor HA3 = new HtmlAnchor();
            HA3.ServerClick += new EventHandler(fromNgo_ServerClick);

            BindNews();

        }
    }

三个标签中的serverclick代码:-

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";
        }
    }
伊恩·琼斯(Ian Jones)

我不确定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()来停止默认的click事件。就样式而言,我不建议对变量使用$,太接近jQuery $的用法,也不建议这样做。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

标签未正确对齐

来自分类Dev

标签未正确更改

来自分类Dev

img标签未正确放置

来自分类Dev

ListView 未正确显示标签

来自分类Dev

激活条件时,警报框未显示在正确的方向

来自分类Dev

<a>标签未覆盖<div>的正确区域

来自分类Dev

标签栏的底部未正确着色

来自分类Dev

jQuery <input>标签未正确显示

来自分类Dev

图像和标签未正确对齐

来自分类Dev

ggplot2标签未正确居中

来自分类Dev

Bootstrap表单标签未正确显示

来自分类Dev

Laravel / Blade:标签/空格未正确包含

来自分类Dev

单选按钮标签未正确显示

来自分类Dev

javascript变量未正确分配

来自分类Dev

Javascript 数学未正确验证

来自分类Dev

JavaScript 算法未正确过滤

来自分类Dev

激活位置哈希的标签

来自分类Dev

如何使用javaScript生成正确的html标签?

来自分类Dev

如何使用Nokogiri正确修复未关闭的HTML标签

来自分类Dev

表单标签中的春季消息未正确显示

来自分类Dev

iOS Swift标签框架高度未正确更新

来自分类Dev

R:ggplotly中的长刻度标记标签未正确显示

来自分类Dev

UITableViewCell第一次未正确加载标签

来自分类Dev

高图-仪表图数据标签未正确定位

来自分类Dev

ChartJS 散点图 X 轴标签未正确显示

来自分类Dev

Python Tkinter 标签未显示正确的 ASCII 值

来自分类Dev

样式未正确应用于 <ul> 标签

来自分类Dev

激活未使用的硬盘

来自分类Dev

JavaScript布尔参数未正确传递