点击这个状态上的导航菜单 ... 可以打开对应的地址来显示任务项目 ... 我们可以为这个菜单项，根据当前页面的地址来添加一个 css 类，为这个菜单项添加点额外的样式 ... 用它可以区分一下，当前打开的地址，属于哪一个菜单项 ...

在我们可以先在全部，这个菜单项上添加一个叫 selected 的类 ... 这个类的样式已经在应用里面定义好了，就是会加粗显示文字 ...

然后用 jQuery 找到所有的菜单项上的 a 标签 ... 去掉 selected 类 .. 再根据当前的地址上的参数，去在对应的菜单项上添加一个 selected 类 ...

先打开应用的主页 index.html ... 在这里找到定义页脚模板的地方 ... 然后在这个导航上面，为全部这个菜单项上的 a 标签上添加一个 selected 类 ...

保存一下 ...

再打开应用的视图 ... AppView.js ...

在这个视图里面，找到 render 方法 ... 然后用一个 this.$ ... 在当前这个视图下面，去查找一些东西 ... 要找的元素是 #filters 这个 id 下面的 li 标签下面的 a 标签 ....

用一个 removeClass 这个方法 ... 去掉这些标签里面的 selected 这个类 ...

然后再根据当前的地址 ... 去过滤一下 ... 用 filter 这个方法 ... 指定一下要过滤的条件 ... 也就是href 这个属性的值 ... 这里用一个 #/ 后面再加上当前页面地址上的参数的值 ... 这里用 app.TodoFilter 来表示 ... 如果有参数值，就让它等于这个参数的值 ... 如果没有，就让它等于一个空白 ...

最后，再对过滤出来的这个 a 标签上面，去添加一个 selected 类 ... 用 addClass 这个方法 ...

// 导航菜单激活状态
this.$('#filters li a')
.removeClass('selected')
.filter('[href="#/' + (app.TodoFilter || '') + '"]')
.addClass('selected');

保存 ... 回到浏览器 ... 刷新 ... 当前的位置是应用的首页 ... 所以， 在 全部 这个菜单项上会添加一个 selected 的 css 类 ... 你会看到，会加粗显示这个菜单项上的文字 ...

再点一下 进行中 .... 这样会在先去掉在全部这个菜单项上的 selected 类 ... 然后在这个进行中上面添加一个 selected 类 ...

再看一下 已完成 ...

去掉了在 进行中 上面的 selected 类，把它又添加到了 已完成 这个菜单项上 ...