我前端水平不行，玩不转 Reace/Vue 这些，传统方案拿模板做多页怎么解决菜单栏高亮这些问题？

[cpdyj0]

想求一个比较好看的方案，不这么 low 的。

[hoythan]

没听懂你的需求到底是啥？ js 怎么判断当前页面？ 无非就是判断 url 地址呗

[cpdyj0]

我用的那几个模板菜单栏是可以伸缩的，切换页面时不想丢失状态，有没有啥好办法？我目前的想法是走 localstorage，有没有更好看的办法？

@hoythan

[CDL]

iframe

[fucker]

后端渲染？
用了模板的话，菜单栏标签里 class 把对应的属性渲染下？
浏览器里调试一下找到菜单激活时 class 的属性值？
我见过大多类似是这样的 <li class="items item active">xx</li>

不知道我理解的对不对
要不然就 #3 iframe
或者#1 用 js 先判断 uri

[azh7138m]

切换页面时不想丢失状态


啥是切页面，浏览器切 tab 吗？

[SakuraKuma]

你已经说了. 就是 localstorage. 如果还要兼容 IE, 要 cookie..

( 弊端就是打开的时候会闪一闪...

[cpdyj0]

@SakuraKuma 如果我把这块的 js 写页面里，靠前点是不是就可以不用删一删了:）


@fucker 是呢，就是这个意思，只是感觉写死在模板里不太好


@CDL 额，，这个东西太老了吧。

[SakuraKuma]

@cpdyj0
1. 放在需要处理的 dom 前 / js 获取不到。
2. 放后, 肯定先渲染, 再改动, 闪。
3. 整个组件先隐藏, 改动完再显示, 有股微妙的违和感。

[banricho]

有这功夫来折腾，不如直接 Vue 文档撸一波，分分钟的事儿。。。

[cpdyj0]

@banricho 看到 Vue 就想到了 SPA，然后看了看自己的前端水平，算了吧😂

[TomVista]

放到 session 里``

[ferrum]

一般后端就直接返回带有 active class 的菜单项。

如果前端做的话，比对当前的 URL，然后给相应的 item 加上 active。

[ETiV]

无论前端还是后端，都是判断一下导航栏的项目跟当前 URL 是不是同一个地址、或者是 URL 的父级，是的话就给他加一个 active 的 class。css 里面把 active 调成别的颜色就行了

[66beta]

vue 都嫌麻烦？你是认真的吗？

[marcong95]

传统方案应该是跟 @fucker 说的差不多吧，给当前页面对应的那个菜单给一个 active 的类之类的，也不是什么写死的，导航栏一般是抽出来一个模板，然后模板里面判断当前是哪个页面，然后再对应的地方渲染出 active 类

[clino]

https://getbootstrap.com/docs/4.2/components/navbar/ 这个可以做顶部的菜单,也能做侧边的菜单,如何高亮看例子

[boringdays2015]

vue 都玩不转的话……还是别鼓捣前端比较好……

[cpdyj0]

@boringdays2015 我也想老老实实的去后面写 API，就是学校社团小项目，有能力干活的就我们几个:)

[PerFectTime]

给一个 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:
}
}