专栏首页一个会写诗的程序员的博客Java Web 实现导航栏 active 状态随着页面自动切换

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 条评论
登录 后参与评论

相关文章

  • spring-data-jpa + SpringBoot + bootstrapTable 后端分页 模糊查询spring-data-jpa + SpringBoot + bootstrapTab

    需要注意的是,bootstrap-table与bootstrap 3是兼容的。但是bootstrap 4还不行。

    一个会写诗的程序员
  • MyBatis 多参数综合查询的动态 SQL 实现示例

    一个会写诗的程序员
  • 快速开始 Hello World 和 Python 之禅环境安装Python IDE Shell 界面

    优美胜于丑陋(Python 以编写优美的代码为目标) 明了胜于晦涩(优美的代码应当是明了的,命名规范,风格相似) 简洁胜于复杂(优美的代码应当是简洁的,不要...

    一个会写诗的程序员
  • 推券客修改登记

    /public_html/App/M/Action/PddAction.class_bak.php

    用户1191760
  • bootstrap 下拉菜单 分割线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • 列表页面指向 原

    在引用公共html页面时,为了便于知道当前所处的页面,我们往往在当前的页面采用特定的样式(如在当前页面的列表中加active class),实现原理是当a 的h...

    tianyawhl
  • python之lxml(xpath)

    机器学习和大数据挖掘
  • Python 字符串换行的几种方式

    py3study
  • bootstrap 下拉菜单 禁用菜单项

     <div class="dropdown"> <button type="button" class="btn btn-default dropdown-t...

    用户5760343
  • 从零开始学 Web 之 移动Web(四)实现JD分类页面

    如下面的结构:大盒子1和大盒子2分为上下结构,小盒子3和小盒子4在大盒子2的内部,分为左右结构。

    Daotin

扫码关注云+社区

领取腾讯云代金券