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

.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时所做的那样，这是在每个单独的页面上设置的。 / p>

如上所示，这不会起作用，我想知道是否有任何方法可以通过只使用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没有包含查询字符串。当然，如果我查看documentation，我会注意到它声明查询字符串信息未包含且未添加此更新

选中的菜单使用js突出显示Razor 3 cshtml

1 个答案: