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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Windows Server AppFabric Beta 2 已经发布

Windows Server AppFabric Beta 2是一个包含完全功能的AppFabric版本(This build represents our “...

19150
来自专栏闵开慧

ERROR security.UserGroupInformation: Priviledge...

"Failed to set permissions of path"问题 参考文献:https://issues.apache.org/jira/browse...

36790
来自专栏后台及大数据开发

CentOS下 elasticsearch集群安装

4.修改/root/elasticsearch-node3/config/elasticsearch.yml 为如下内容(注意红色部分为三个节点不一致的地方)

12130
来自专栏运维

Codis3.2集群HA高可用方案

Redis 本身就是最终一致性的。Master 挂了,Promote Slave 成为新的 Master 需要时间(测试15秒内)。其实 Sentinel 就是...

50320
来自专栏技术小黑屋

Fix Missing Command Takes Too Long to Respond in Fedora

I am getting well on with Fedora now. However when I was a fresher to Fedora, I ...

11510
来自专栏dalaoyang

SpringBoot返回json和xml

有些情况接口需要返回的是xml数据,在springboot中并不需要每次都转换一下数据格式,只需做一些微调整即可。 新建一个springboot项目,加入依赖j...

38880
来自专栏三杯水

Codis3.2集群HA高可用方案

Sentinel需要使用原生的Redis-server,版本要等于或高于Codis3.2里面的3.2.8版本, 这里是在Redis3.2.9的下配置测试的,另外...

11420
来自专栏颇忒脱的技术博客

Nginx反向代理WebSocket响应403的解决办法

在Nginx反向代理一个带有WebSocket功能的Spring Web程序(源代码地址)时,发现访问WebSocket接口时总是出现403响应,Nginx的配...

30950
来自专栏后台及大数据开发

springBoot系列教程05:fastjson的集成、配置及使用

springBoot自带的json用着不太习惯,已习惯了fastJSON,下面介绍下fastjson的配置

14310
来自专栏大大的微笑

ActiveMQ几个重要的配置文件

version:5.10,在5.8以后增加了levelDB的方式进行集群配置 ①.wrapper.conf: # -----------------------...

1.4K90

扫码关注云+社区

领取腾讯云代金券