选定的菜单使用js突出显示Razor 3 CSHTML

Question

昨天我开始翻译页面或将其从HTML5 / CSS / JS / jQuery / PHP移至razor 3或cshtml / css / js，现在正尝试在菜单中突出显示活动页面。

_SiteLayout.cshtml部分：

<nav class="navigation">
       <ul class="active">
          <li class="unSelected"><a href="/Default" onclick="javascript:click (this);">Home</a></li>
          <li class="unSelected"><a href="/Photography">Photography</a></li>
          <li class="unSelected"><a href="/Webdevelopment">Web Development</a></li>
          <li class="unSelected"><a href="/About">About</a></li>
          <li class="unSelected"><a href="/Contact">Contact</a></li>
     </ul>
</nav>

CSS部分：

.navigation .unSelected a {
border-bottom: 2px solid #fff;
}

.navigation .selected a {
border-bottom: 2px solid #3acdd5;
}

JS部分：

$('.navigation ul li a').click(function () {
    $('.navigation ul li a').each(function(index, element) {
       $(this).removeClass().addClass('unSelected');
    })

    $(this).removeClass('unSelected');
    $(this).addClass('selected');
});

我不会选择要突出显示的正文链接，直到您单击下一个应该高亮显示的正文链接为止，依此类推，就像我在使用html时所做的那样，这是在每个页面上设置的。

如所看到的那样，这是行不通的，我想知道是否有任何办法仅通过使用JS来使这项工作有效，如果可以的话，如何进行。

如果没有，那么解决此类问题的最佳方法是什么？

Answer 1

我的建议是使用Razor引擎添加selected和unselected类，如下所示：

<li class='@(Request.Url.AbsolutePath.ToString() == Url.Action("Default") ? "selected" : "unSelected")><!-- List item content --></li>

这使您可以利用MVC URL路由，从而无需在任何地方进行任何主要的url解析或硬编码。 但是，对于您将查询字符串作为URL一部分的情况，我的回答可能并不全面。

更新：我只是在自己的项目上进行了一个测试，它看起来像Request.Url.AbsolutePath不包含查询字符串。 当然，如果我查看了文档 ，我会注意到它指出不包含查询字符串信息，并且未添加此更新