ASP.NET C＃，menu class =＆＃34; active＆＃34;在站点主页面中

Question

我的项目是一个asp.net（C＃）。菜单按钮放置在Site Master页面中。我是asp.net和c＃的新手。你能帮助我吗？如何添加class =＆＃34; active＆＃34;菜单按钮？

例如：

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

谢谢！

Answer 1

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

Answer 2

菜单添加后：

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用于包含子菜单的菜单（可以通过添加下拉类添加）。

Answer 3

我的解决方案：

在Site.Master中，以您的Page类名称命名锚点：

<!-- 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");
}

Answer 4

感谢您帮我找到解决办法，但我解决了。

1。刚为我想要激活的每个菜单添加了ID，
2。将window.onload = function ()添加到js文件中，
3。使用window.location.pathname获取页面网址的路径，
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 = "";
    }
}