想求一个比较好看的方案,不这么 low 的。
1 hoythan 2019-01-24 15:15:04 +08:00 ![]() 没听懂你的需求到底是啥? js 怎么判断当前页面? 无非就是判断 url 地址呗 |
![]() | 2 cpdyj0 OP |
3 CDL 2019-01-24 15:19:18 +08:00 iframe |
![]() | 4 fucker 2019-01-24 16:26:00 +08:00 ![]() 后端渲染? 用了模板的话,菜单栏标签里 class 把对应的属性渲染下? 浏览器里调试一下找到菜单激活时 class 的属性值? 我见过大多类似是这样的 <li class="items item active">xx</li> 不知道我理解的对不对 要不然就 #3 iframe 或者#1 用 js 先判断 uri |
5 azh7138m 2019-01-24 16:29:34 +08:00 via Android 切换页面时不想丢失状态 啥是切页面,浏览器切 tab 吗? |
![]() | 6 SakuraKuma 2019-01-24 16:45:48 +08:00 ![]() 你已经说了. 就是 localstorage. 如果还要兼容 IE, 要 cookie..br /> ( 弊端就是打开的时候会闪一闪... |
![]() | 7 cpdyj0 OP |
![]() | 8 SakuraKuma 2019-01-24 17:17:31 +08:00 ![]() |
![]() | 9 banricho 2019-01-24 17:22:55 +08:00 有这功夫来折腾,不如直接 Vue 文档撸一波,分分钟的事儿。。。 |
![]() | 11 TomVista 2019-01-24 17:28:12 +08:00 放到 session 里`` |
![]() | 12 ferrum 2019-01-24 17:29:27 +08:00 ![]() 一般后端就直接返回带有 active class 的菜单项。 如果前端做的话,比对当前的 URL,然后给相应的 item 加上 active。 |
![]() | 13 ETiV 2019-01-24 17:34:42 +08:00 via iPhone 无论前端还是后端,都是判断一下导航栏的项目跟当前 URL 是不是同一个地址、或者是 URL 的父级,是的话就给他加一个 active 的 class。css 里面把 active 调成别的颜色就行了 |
![]() | 14 66beta 2019-01-24 17:35:08 +08:00 via Android vue 都嫌麻烦?你是认真的吗? |
![]() | 15 marcong95 2019-01-24 17:35:44 +08:00 传统方案应该是跟 @fucker 说的差不多吧,给当前页面对应的那个菜单给一个 active 的类之类的,也不是什么写死的,导航栏一般是抽出来一个模板,然后模板里面判断当前是哪个页面,然后再对应的地方渲染出 active 类 |
![]() | 16 clino 2019-01-24 17:37:13 +08:00 https://getbootstrap.com/docs/4.2/components/navbar/ 这个可以做顶部的菜单,也能做侧边的菜单,如何高亮看例子 |
17 boringdays2015 2019-01-24 18:20:42 +08:00 vue 都玩不转的话……还是别鼓捣前端比较好…… |
![]() | 18 cpdyj0 OP @boringdays2015 我也想老老实实的去后面写 API,就是学校社团小项目,有能力干活的就我们几个:) |
19 PerFectTime 2019-01-25 09:17:01 +08:00 ![]() 给一个 low 一点的方案: function SetNavStyle() { $("#navbar > ul.nav.navbar-nav > li.active").removeClass('active'); var url = location.href; url = url.substring(url.lastIndexOf('/') + 1); switch (url) { case 'Index': $('#navbar > ul.nav.navbar-nav > li:nth-child(1)').addClass('active'); break; case 'User': $('#navbar > ul.nav.navbar-nav > li:nth-child(2)').addClass('active'); break; case 'Products': $('#navbar > ul.nav.navbar-nav > li:nth-child(3)').addClass('active'); break; case 'ProdType': $('#navbar > ul.nav.navbar-nav > li:nth-child(4)').addClass('active'); break; default: } } |