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

效果图

螢幕快照 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