jquery - 如何更改部分 ASP.NET MVC 菜单的事件类

Question

我有一个局部 View ，我将它作为菜单用于所有 View

我用这行代码在所有 View 之上导入这个菜单

@Html.Partial("_MainMenu")

主要是我想在 View 之间更改 class:"active" 但我不知道在这种结构中如何实现。

我的问题是，当用户打开菜单中的链接时，我首先要从所有标签中省略 class:"active"，然后为此添加 class active用户打开的相同链接。 例如，当用户在 home-index 中时，它的标签具有 active 类，因此菜单中的 Home 文本具有较浅的颜色，然后当用户处于 contact_us View 中时，我希望菜单中的联系我们文本具有较浅的颜色，方法是提供 active 类.

感谢任何帮助。谢谢

如果需要，这是我的部分菜单 View ，默认为主页索引

<div id="mainnav" class="">
<nav class="navbar navbar-default" role="navigation">
    <div id="topmenu" class="fixsaz">

    </div>


    <div class="row">
        <div class="navbar-header col-md-4 col-sm-6">


            <a class="" id="titlename" href="Home">
                <img class="" src="~/Content/img/logo/iranjourney.png" alt="iranholiday.com" />
            </a>
        </div>
        <div class="col-md-8 col-sm-10 collapse navbar-collapse overflowshow" id="example-navbar-collapse">

            <ul id="mainul" class="nav navbar-nav  overflowshow">
                <li class="active">// default is for home index 
                    @Html.ActionLink("HOME", "index", "Home")

                </li>


                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        OUR TOURS
                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">Scheduled Group Tours</a>
                        </li>
                        <li><a href="/Tours_By_Category/index">Tours By Category</a></li>


                    </ul>

                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">

                        <b class="caret"></b>
                    </a>



                </li>


                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        OUR SERVICES
                        <b class="caret"></b>
                    </a>



                </li>



                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        ABOUT US
                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li>
                            <a href="/Home/About_US">
                                <p>Team work</p>
                                <p>Certificates</p>
                                <p>Statistics</p>
                                <p>Our agents</p>
                            </a>
                        </li>


                    </ul>

                </li>

                <li>
                    @Html.ActionLink("CONTACT US", "index", "Contact_US")


                </li>

            </ul>

        </div>
    </div>





</nav>

Answer 1

您可以使用 javascript/jquery 来设置事件类。

删除首字母 class="active"对于您的“默认”<li>元素并给出每个 <li>元素独特 id属性(与 Controller 和/或操作方法的名称相关的东西)，例如

<li id="Index">...</li>
<li id="Tours">...</li>

允许他们被选中。然后在每个 View 中添加一个脚本来选择关联的元素并设置类名，例如 Index.cshtml

$('#Index').addClass('active');

或者，在您的布局文件中有一个脚本，它根据从 Controller 方法传递给 View 的值来设置类名，例如

$('#' + '@ViewBag.ActiveMenu').addClass('active');

并且在每个 Controller 方法中，传递关联的 id到 View ，例如在 Index() 中方法

ViewBag.ActiveMenu = "Index";
return View(..);