Sammy.js导航菜单

Question

我正在玩sammy.js，并试图为我的SPA构建一个不错的菜单。我的HTML结构如下所示：

<nav class="navMain">
  <ul class="nav">
    <li class="active"><a href="/#/">Home</a></li>
    <li><a href="/#aroute">A route</a></li>
    <li><a href="/#anotherroute">Anouther route</a></li>
  </ul>
</nav>
<div class="main">
  <!-- here goes everything I do with sammy -->
</div>

当然，我想要做的是在路由到该页面时将active类分配给其他菜单项。到目前为止，我还没有找到这方面的任何例子，我想出了如下结论：

this.bind('run-route', function() {
  var path = this.params.path;      
  $('.navMain li').removeClass('active').find('a[href*="' + path + '"]').parent().addClass('active');
});

在工作期间，这看起来并不是解决这个非常常见的问题的好办法。我想一定有更简单、更地道的东西，但我什么也找不到。

有人能告诉我一个更好的解决方案吗？

Answer 1

更新路由处理程序代码中的类，在那里它知道您现在在上的是什么路由，，并且可以在列表中找到它。

对于此标记：

<nav class="navMain">
  <ul class="nav">
    <li class="active"><a href="#/">Home</a></li>
    <li><a href="#/aroute/">A route</a></li>
    <li><a href="#/anotherroute/">Anouther route</a></li>
  </ul>
</nav>

这是JS：

function SetActiveLink(name){
    var ul = $('ul')

    ul.children().removeClass('active')

    ul.find('a[href="#/'+name+'/"]').parent().addClass('active')
}

sammyapp.route('get','#/a/', function() {
    SetActiveLink('a')
})

sammyapp.route('get','#/b/', function() {
    SetActiveLink('b')
})