前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Java Web 实现导航栏 active 状态随着页面自动切换

Java Web 实现导航栏 active 状态随着页面自动切换

作者头像
一个会写诗的程序员
发布2018-08-17 15:02:53
1.1K0
发布2018-08-17 15:02:53
举报

效果图

螢幕快照 2017-08-23 23.05.59.png

螢幕快照 2017-08-23 23.05.46.png

Controller 代码

    @RequestMapping(value = "meituView", method = arrayOf(RequestMethod.GET))
    fun meituView(model: Model, request: HttpServletRequest): ModelAndView {
        model.addAttribute("requestURI" , request.requestURI)
        return ModelAndView("meituView")
    }


    @RequestMapping(value = "meituFavoriteView", method = arrayOf(RequestMethod.GET))
    fun meituFavoriteView(model: Model, request: HttpServletRequest): ModelAndView {
        model.addAttribute("requestURI" , request.requestURI)
        return ModelAndView("meituFavoriteView")
    }

其中,关键代码是

model.addAttribute("requestURI" , request.requestURI)

前端代码(Freemarker)

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">美图中国</a>
        </div>
        <div>
            <ul class="nav navbar-nav">

                <li class='<#if requestURI=="/meituView">active</#if>'><a href="meituView">美图列表</a></li>
                <li class='<#if requestURI=="/meituFavoriteView">active</#if>'><a href="meituFavoriteView">精选收藏</a></li>

                <li class=""><a href="doCraw" target="_blank">执行抓取</a></li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Kotlin极简教程 <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="http://www.jianshu.com/nb/12976878" target="_blank">Kotlin</a></li>
                        <li><a href="#">SpringBoot</a></li>
                        <li><a href="#">Java</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Scala</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Groovy</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

其中,关键代码是:

<#if requestURI=="/meituView">active</#if>

完整工程源代码:

https://github.com/EasyKotlin/chatper15_net_io_img_crawler

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.08.23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档