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')
})

Sammy.js导航菜单

1 个答案: