1.从该处进入导航页面，点击分贝进入点击的页面。

2.点击1处进入对应的导航栏，导航栏变色。

3.在1图图片点击跳转是给地址添加参数status。

4.在后台IndexController.class.php处接收status的值并赋值给前台。

5.前台用hidden值接收status的值

6.写jquery，关联状态值

7. active的值先写好css属性

.ser_box{width:100%;height:100%;overflow-y:auto}

.ser_header{width:100%;height:90px;}

.ser_headc{width:85%;height:90px;border-bottom:1px solid #C4DBED;margin:0 auto;}

.ser_left{width:20%;height:90px;float:left;}

.ser_center{width:60%;height:90px;float:left;}

.ser_right{width:19%;height:90px;float:left;text-align:right;font-size:12px;}

.ser_text{vertical-align:middle;margin-left:45px;}

.ser_ul{list-style:none;overflow:hidden;margin:0 auto;width:100%;}

.ser_ul li{float:left;height:40px;line-height:40px;border:1px solid #C4DBED;border-bottom:none;}

.ser_li{width:12%;}

.ser_li_speical{width:14%;}

.img1{background:url(../images/dowers.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}

.img1.active{background:url(../images/dowers_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}

.img1:hover{background:url(../images/dowers_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}

.img2{background:url(../images/housekeep.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}

.img2.active{background:url(../images/housekeep_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}

.img2:hover{background:url(../images/housekeep_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}

.img3{background:url(../images/mall.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}

.img3.active{background:url(../images/mall_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}

.img3:hover{background:url(../images/mall_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}

.img4{background:url(../images/checkin.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}

.img4.active{background:url(../images/checkin_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}

.img4:hover{background:url(../images/checkin_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}

.img5{background:url(../images/payment.png)no-repeat;background-size: 22px 22px;background-position:10px;color:#636162;}

.img5.active{background:url(../images/payment_w.png)no-repeat;background-size: 22px 22px;background-position:10px;color:#FFF;background-color:#557FB9;}

.img5:hover{background:url(../images/payment_w.png)no-repeat;background-size: 22px 22px;background-position:10px;color:#FFF;background-color:#557FB9;}

.img6{background:url(../images/tool.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}

.img6.active{background:url(../images/tool_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}

.img6:hover{background:url(../images/tool_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}

.img7{background:url(../images/complaints.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}

.img7.active{background:url(../images/complaints_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#fff;background-color:#557FB9;}

.img7:hover{background:url(../images/complaints_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#fff;background-color:#557FB9;}

.img8{background:url(../images/car.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}

.img8.active{background:url(../images/car_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#fff;background-color:#557FB9;}

.img8:hover{background:url(../images/car_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#fff;background-color:#557FB9;}

thinkphp点击导航变色的更多相关文章

  1. 请问：关于织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表的问题

    要设置织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表, 就按照如下图所示的方法进行操作,为什么 点击导航上的父栏目出现死循环呢, 根本浏览不了网页. 请各位大神指点指点,为什么点击 ...

  2. 锚点/JQ：点击导航跳到网页中的指定位置

    今天做了一个简单的功能,页面往下滚动到一定位置,顶部出现一个浮动的导航栏,点击导航栏标签,下面页面跳转到相应的区域.回到顶部,导航栏隐藏. 因为顶部有一个浮动的导航栏,所以跳转到下面页面的时候,总是盖 ...

  3. js实现页面下拉后展示导航，以及点击导航自动滑动到相关页面

    //监控,下拉750px后展示导航 $(window).scroll(function(){ var $this = $(this); var targetTop = $(this).scrollTo ...

  4. DOM操作--表格点击行变色

    点击表格行变色,这种网页效果应该还是比较常见的.大家应该看见了,我这里的效果是用DOM操作实现的,那么很多人会问什么是DOM操作,贴出代码之前我就和大家解释一下什么是DOM操作: DOM是Docume ...

  5. Fragment生命周期及实现点击导航图片切换fragment，Demo

    PS:Fragment简介 Fragment是Android3.0后引入的一个新的API,他出现的初衷是为了适应大屏幕的平板电脑, 当然现在他仍然是平板APP UI设计的宠儿,而且我们普通手机开发也会 ...

  6. vue点击元素变色兄弟元素不变色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 利用this属性实现点击按钮变色.选中效果

    浏览器宿主的全局环境中,this指的是window对象. <script type="text/javascript"> console.log(this === wi ...

  8. iOS - push 或 pop或点击导航栏返回pop指定导航控制器

    以前一直有个很疑惑的问题没有搞清楚 关于ios中 viewcontroller的跳转问题,其中有一种方式是采用navigationController pushViewController 的方法,比 ...

  9. Android：GridView中实现点击Item变色，再点击还原。

    使用GridView时想实现点击其中的一个Item,该Item改变背景,再次点击Item变回原来的背景,网上搜了很多资料都没有看到类似的案例,但还是有所启发,现来分享我的做法. 首先,首先为GridV ...

随机推荐

  1. html基础整理（02浮动 问题）

    margin的塌陷现象及解决方案    如果一个大盒子中包含一个小盒子,给小盒子设置margin-top,大盒子会一起向下平移 - 解决方案: 1. 给大盒子加一个边框(border) 2. 给大盒子 ...

  2. 3分钟解决MySQL 1032 主从错误（转）

    转自  https://blog.51cto.com/suifu/1845457 3分钟解决MySQL 1032主从错误 Part1:写在最前 1032错误----现在生产库中好多数据,在从库误删了, ...

  3. SpringBoot idea maven打包war及运行war包

    pom.xml修改打包类型pom改为war <artifactId>Test02</artifactId> <packaging>war</packaging ...

  4. C#-输入输出，类型，运算符，语句的练习——★判断年份是否是闰年★

    //输入一个年份,判断是否是闰年 //(能被4整除却不能被100整除的,年份世纪年份能被400整除的是闰年) Console.Write("请输入一个年份:"); int year ...

  5. TX2 用文件IO的方式操作GPIO

    概述 通过 sysfs 方式控制 GPIO,先访问 /sys/class/gpio 目录,向 export 文件写入 GPIO 编号,使得该 GPIO 的操作接口从内核空间暴露到用户空间,GPIO 的 ...

  6. Java将\替换成/

    public static void main(String[] args) { String str="upload\\media\\201904\\i4Qjz8E40xGQovUq-2C ...

  7. 基于python的几种排序算法的实现

    #!usr/bin/python3 # -*- coding: utf-8 -*- # @Time : 2019/3/28 10:26 # @Author : Yosef-夜雨声烦 # @Email ...

  8. docker 运行容器时为容器起别名

    docker run --name=mydemo -p  -d 2222:80 imagename --name: 指定容器名称 -p:指定容器端口号 -d:指定容器后台运行

  9. Spring Boot中自动执行sql脚本

    说明:所有的代码基于SpringBoot 2.0.3版本 背景 在应用程序启动后,可以自动执行建库.建表等SQL脚本.下文中以要自动化执行people.sql脚本为例说明,脚本在SpringBoot工 ...

  10. vs2010启动越来越慢解决方法

    自己用的电脑中vs2010启动总是越来越慢,耽误时间,用了下面的方法试了一下,效果还不错,如果你的vs2010也是,遇到这种问题不妨试一试: 1.重新设置了vs2010的环境(在vs2010命令提示符 ...