使用jQuery为菜单和主页添加动态css

Question

我根据url <a href"">值添加一个类"current_page_item"到当前页面。我的主页<a href="myurl/">Home</a>，所有其他的值，如。<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>

我的问题是如何适应主页的空异常。我想在代码中的条件，将仍然添加类到主页，虽然值为空。请帮助。

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