V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
cpdyj0
V2EX  ›  问与答

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

  •  
  •   cpdyj0 · 2019-01-24 15:08:55 +08:00 · 1831 次点击
    这是一个创建于 1891 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    19 条回复    2019-01-25 09:17:01 +08:00
    hoythan
        1
    hoythan  
       2019-01-24 15:15:04 +08:00   ❤️ 1
    没听懂你的需求到底是啥? js 怎么判断当前页面? 无非就是判断 url 地址呗
    cpdyj0
        2
    cpdyj0  
    OP
       2019-01-24 15:18:59 +08:00
    我用的那几个模板菜单栏是可以伸缩的,切换页面时不想丢失状态,有没有啥好办法?我目前的想法是走 localstorage,有没有更好看的办法?

    @hoythan
    CDL
        3
    CDL  
       2019-01-24 15:19:18 +08:00
    iframe
    fucker
        4
    fucker  
       2019-01-24 16:26:00 +08:00   ❤️ 1
    后端渲染?
    用了模板的话,菜单栏标签里 class 把对应的属性渲染下?
    浏览器里调试一下找到菜单激活时 class 的属性值?
    我见过大多类似是这样的 <li class="items item active">xx</li>

    不知道我理解的对不对
    要不然就 #3 iframe
    或者#1 用 js 先判断 uri
    azh7138m
        5
    azh7138m  
       2019-01-24 16:29:34 +08:00 via Android
    切换页面时不想丢失状态


    啥是切页面,浏览器切 tab 吗?
    SakuraKuma
        6
    SakuraKuma  
       2019-01-24 16:45:48 +08:00   ❤️ 1
    你已经说了. 就是 localstorage. 如果还要兼容 IE, 要 cookie..

    ( 弊端就是打开的时候会闪一闪...
    cpdyj0
        7
    cpdyj0  
    OP
       2019-01-24 17:00:39 +08:00
    @SakuraKuma 如果我把这块的 js 写页面里,靠前点是不是就可以不用删一删了:)


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


    @CDL 额,,这个东西太老了吧。
    SakuraKuma
        8
    SakuraKuma  
       2019-01-24 17:17:31 +08:00   ❤️ 1
    @cpdyj0
    1. 放在需要处理的 dom 前 / js 获取不到。
    2. 放后, 肯定先渲染, 再改动, 闪。
    3. 整个组件先隐藏, 改动完再显示, 有股微妙的违和感。
    banricho
        9
    banricho  
       2019-01-24 17:22:55 +08:00
    有这功夫来折腾,不如直接 Vue 文档撸一波,分分钟的事儿。。。
    cpdyj0
        10
    cpdyj0  
    OP
       2019-01-24 17:25:22 +08:00
    @banricho 看到 Vue 就想到了 SPA,然后看了看自己的前端水平,算了吧😂
    TomVista
        11
    TomVista  
       2019-01-24 17:28:12 +08:00
    放到 session 里``
    ferrum
        12
    ferrum  
       2019-01-24 17:29:27 +08:00   ❤️ 1
    一般后端就直接返回带有 active class 的菜单项。

    如果前端做的话,比对当前的 URL,然后给相应的 item 加上 active。
    ETiV
        13
    ETiV  
       2019-01-24 17:34:42 +08:00 via iPhone
    无论前端还是后端,都是判断一下导航栏的项目跟当前 URL 是不是同一个地址、或者是 URL 的父级,是的话就给他加一个 active 的 class。css 里面把 active 调成别的颜色就行了
    66beta
        14
    66beta  
       2019-01-24 17:35:08 +08:00 via Android
    vue 都嫌麻烦?你是认真的吗?
    marcong95
        15
    marcong95  
       2019-01-24 17:35:44 +08:00
    传统方案应该是跟 @fucker 说的差不多吧,给当前页面对应的那个菜单给一个 active 的类之类的,也不是什么写死的,导航栏一般是抽出来一个模板,然后模板里面判断当前是哪个页面,然后再对应的地方渲染出 active 类
    clino
        16
    clino  
       2019-01-24 17:37:13 +08:00
    https://getbootstrap.com/docs/4.2/components/navbar/ 这个可以做顶部的菜单,也能做侧边的菜单,如何高亮看例子
    boringdays2015
        17
    boringdays2015  
       2019-01-24 18:20:42 +08:00
    vue 都玩不转的话……还是别鼓捣前端比较好……
    cpdyj0
        18
    cpdyj0  
    OP
       2019-01-24 18:52:51 +08:00
    @boringdays2015 我也想老老实实的去后面写 API,就是学校社团小项目,有能力干活的就我们几个:)
    PerFectTime
        19
    PerFectTime  
       2019-01-25 09:17:01 +08:00   ❤️ 1
    给一个 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:
    }
    }
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2850 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 11:44 · PVG 19:44 · LAX 04:44 · JFK 07:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.