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. 【Qt】Qt在Windows下的开发与调试环境配置

    前文已经交待了从源码编译Qt自定义版本.现在可以开始配置一下开发与调试程序并写个Hello World了. 1. IDE 虽然Qt官方有VS插件使我们可以在VisualStudio中开发Qt应用,但我 ...

  2. 【JavaScript】动态原型模式创建对象 ||为何不能用字面量创建原型对象?

    var proto = ""; function Person(name, age, job) { this.name = name; this.age = age; this.j ...

  3. python3.6的request

    request实例1: import requests payload = {'key1':'value','key2':'value2'} url = "http://httpbin.or ...

  4. Hyper-V如何新建虚拟机

    http://www.xitongtiandi.net/wenzhang/soft/24543.html

  5. mysql中权限的小知识

    参考:https://www.cnblogs.com/apollo1616/articles/10294490.html mysql中user表中host列的值的意义 % 匹配所有主机 localho ...

  6. linux常见编辑命令

    保存命令 按ESC键 跳到命令模式,然后: :w 保存文件但不退出vi :w file 将修改另外保存到file中,不退出vi :w! 强制保存,不推出vi :wq 保存文件并退出vi :wq! 强制 ...

  7. word里的字号与html字号的对应关系

    在word里输入一段文字,把文字调成需要的大小,即"三号或者小三",然后把文件另存为网页,在格式里选择“html”格式,然后把word关闭,将另存的html文件用编辑工具打开,就可 ...

  8. 【算法笔记】B1025 反转链表

    1025 反转链表 (25 分)   给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1→2→3→4→5→6,K 为 3,则输出应该为 3→2→1→6 ...

  9. Java实现简单井字棋

    Java第一次实验,老师让做一个井字棋,电脑随机下棋. 然后就想能不能聪明一点,可以判断出走哪一步棋:然后只能做到不会输,还是不够聪明,只能呆板地堵住用户,smartRobot的第三个判断逻辑找不到最 ...

  10. Q143 重排链表

    给定一个单链表 L:L0→L1→-→Ln-1→Ln , 将其重新排列后变为: L0→Ln→L1→Ln-1→L2→Ln-2→- 你不能只是单纯的改变节点内部的值,而是需要实际的进行节点交换. 示例 1: ...