ASP.NET C#，菜单class＝“”；活动的”；在网站母版页中

本文关键字：活动 网站 母版页 NET 菜单 class ASP | 更新日期: 2023-09-27 18:28:08

我的项目是一个asp.net（C#）。放置在网站母版页中的菜单按钮。我是asp.net和c#的新手。你能帮助我如何将class="active"添加到菜单按钮中吗？

例如：

<ul id="main_menu">
    <li><a href="Default.aspx">Home</a></li>
    <li>
        <a>Recipes</a>
        <ul id="recipes_menu">
            <li><a href="Recipes.aspx">Recipes 1</a></li>
            <li><a href="Recipes.aspx">Recipes 2</a></li>
            <li><a href="Recipes.aspx">Recipes 3</a></li>
            <li><a href="Recipes.aspx">Recipes 4</a></li>
            <li><a href="Recipes.aspx">Recipes 5</a></li>
            <li><a href="Recipes.aspx">Recipes 6</a></li>
            <li><a href="Recipes.aspx">Recipes 7</a></li>
            <li><a href="Recipes.aspx">Recipes 8</a></li>
            <li><a href="Recipes.aspx">Recipes 9</a></li>
            <li><a href="Recipes.aspx">Recipes 10</a></li>
        </ul>
    </li>
    <li><a href="Cooking.aspx">Cooking</a></li>
    <li><a href="Contact.aspx">Contact</a></li>
</ul>

谢谢！

ASP.NET C#，菜单class＝“”；活动的”；在网站母版页中

<li class="active"><a href="Recipes.aspx">Recipes 1</a></li>

在菜单后添加以下内容：

var page = (window.location.pathname).split("/");
var len = page.length;
$("li.active").removeClass("active");
$("li>a[href='" + page[len - 1] + "']").parents("li,li.dropdown").addClass("active");

li.dropdown用于包含子菜单的菜单（可以通过添加下拉类来添加）。

我的解决方案：

在站点中。大师用你的页面类名命名锚：

<!-- Link to Activity.aspx.cs -->
<li><a id="Activity" runat="server" href="~/Activity">Activity</a></li>

并添加您的样式，例如

.active
{
    font-weight:bold !important;
    font-size:110% !important;
    color:white !important;
}

在Site.Master.cs Page_Load中添加：

if (!IsPostBack)
{
    Type page = this.Page.GetType();
    System.Web.UI.Control control = FindControl(page.BaseType.Name);
    ((System.Web.UI.HtmlControls.HtmlAnchor)control).Attributes.Remove("class");
    ((System.Web.UI.HtmlControls.HtmlAnchor)control).Attributes.Add("class", "active");
}

感谢您试图帮助我找到解决方案，但我解决了

1.刚刚为我想要激活的每个菜单添加了id，
2.将window.onload = function ()添加到js文件中，
3.使用window.location.pathname获取页面url的路径，
4.最后，当页面路径为/Default时，JS将class="active"添加到id="home"
5。完成

HTML:

<ul id="main_menu">
        <li><a id="home" href="Default.aspx">Home</a></li>
        <li>
            <a>Recipes</a>
            <ul id="recipes_menu">
                <li><a href="Recipes.aspx">Recipes 1</a></li>
                <li><a href="Recipes.aspx">Recipes 2</a></li>
                <li><a href="Recipes.aspx">Recipes 3</a></li>
                <li><a href="Recipes.aspx">Recipes 4</a></li>
                <li><a href="Recipes.aspx">Recipes 5</a></li>
                <li><a href="Recipes.aspx">Recipes 6</a></li>
                <li><a href="Recipes.aspx">Recipes 7</a></li>
                <li><a href="Recipes.aspx">Recipes 8</a></li>
                <li><a href="Recipes.aspx">Recipes 9</a></li>
                <li><a href="Recipes.aspx">Recipes 10</a></li>
            </ul>
        </li>
        <li><a id="cooking" href="Cooking.aspx">Cooking</a></li>
        <li><a id="contact" href="Contact.aspx">Contact</a></li>
    </ul>


JS:

window.onload = function () {
    var MenuHome = "/Default";
    var MenuCooking = "/Cooking";
    if (window.location.pathname === MenuHome) {
        document.getElementById("home").className = "active";
    } else {
        document.getElementById("home").className = "";
    }
    if (window.location.pathname === MenuCooking) {
        document.getElementById("cooking").className = "active";
    } else {
        document.getElementById("cooking").className = "";
    }
}
相关文章：