用户登录

在页面的导航栏上可以再添加一个 Files 菜单项目 ..

先找到项目里的 navbar 这个 partial .. 在这个主菜单里面可以再添加一个项目 .. 地址是 FileController.index 或者 files.index .. 链接文字是 Files ..

现在页面上的导航栏上会多了一个 Files 菜单项 ... 打开它,显示的就是这个文件列表页面 .. 我想在显示 Posts 或者 Files 的页面的时候,在所属的菜单项上标记一下激活状态 .. 可以在项目上添加一个 active 类 .. 这个类需要动态添加到菜单项目上 ..

回到项目 ..

先处理一下 Posts .. 在 li 元素的 class 里面 .. 绑定一点东西 .. 视图里的 url 就是当前访问的地址 ... 这里用一下 url 字符串上的 includes 方法 .. 看看包不包含 route('posts.index') ... 如果包含,我们就添加一个 active .. 不包含就什么也不做 ..

下面用类似的方法再处理一下 Files 这个项目 .. 看一下 url 里面包不包含 files.index .. 这里判断的是包不包含 .. 并不是相不相等 .. 是因为,我希望在访问子页面的时候,也让这个项目是激活状态 ...

上面这个 Posts 的链接地址,路由的名字可以使用 posts.index .. 这样更简单一些 ..

预览

回到浏览器 .. 再预览一下 ...

打开 Posts ... 这个 Posts 菜单会是激活状态 ...

再打开一下文章页面 ... 同样 Posts 菜单项会是激活状态 ...

现在打开 Files ... 这个菜单项目就会是激活状态 ...

导航栏菜单项目的激活状态《 Node.js 应用:文件上传 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点