javascript - 使用 jQuery 将动态 CSS 添加到菜单和主页

Question

我正在添加一个类 "current_page_item"根据 url 到当前页面 <a href"">值(value)。我的主页<a href="myurl/">Home</a>所有其他人都有值(value)观，例如。 <a href="myurl/nom">Nom</a>

菜单结构是这样的

<nav id="main-menu">
   <ul id="menu-main-menu" class="menu">
     <li class="menu-item-simple-parent menu-item-depth-0">
      <a href="myurl/">Home</a>
      </li>
  <li class="menu-item-simple-parent menu-item-depth-0">
      <a href="myurl/page2">Page2</a>
      </li>
  <li class="menu-item-simple-parent menu-item-depth-0">
      <a href="myurl/page3">Page3</a>
      </li>
...................and so on
</ul></nav>

这是我到目前为止提出的脚本

    <script type="text/javascript">
        jQuery(document).ready(function () {

            var pnom = @(HttpContext.Current.Request.RequestContext.RouteData.Values["nom"]).ToLowercase();
            jQuery('ul.menu li.menu-item-simple-parent.menu-item-depth-0 a')
               .removeClass('current_page_item')
               .filter(function (index) {
                   return jQuery(this).attr('href').toLowerCase().indexOf(pnom) != -1;
               })
               .addClass('current_page_item');
        });
</script>

我的问题是如何容纳主页的空异常。我想要代码中的一个条件，尽管 pnom 值为 null，但仍会将类添加到主页。 请帮忙。

Answer 1

你可以使用

var pnom = @(HttpContext.Current.Request.RequestContext.RouteData.Values["nom"] ?? "").toLowercase();

当 RouteData.Values["nom"] 为 null 或更好时设置默认值，

(function($){
    $(function () {
        var pnom = "myurl/"+"@((HttpContext.Current.Request.RequestContext.RouteData.Values["nom"] ?? "").ToString().ToLower())";
        $('ul.menu li.menu-item-simple-parent.menu-item-depth-0 a')
            .removeClass('current_page_item')
            .filter(function (index) {
            return $(this).attr('href').toLowerCase() == pnom;
        })
        .addClass('current_page_item');
    });
})(jQuery);

Jsfiddle demo