thinkphp点击导航变色
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点击导航变色的更多相关文章
- 请问:关于织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表的问题
要设置织梦dedecms点击导航上的父栏目进去默认显示第一个子栏目的列表, 就按照如下图所示的方法进行操作,为什么 点击导航上的父栏目出现死循环呢, 根本浏览不了网页. 请各位大神指点指点,为什么点击 ...
- 锚点/JQ:点击导航跳到网页中的指定位置
今天做了一个简单的功能,页面往下滚动到一定位置,顶部出现一个浮动的导航栏,点击导航栏标签,下面页面跳转到相应的区域.回到顶部,导航栏隐藏. 因为顶部有一个浮动的导航栏,所以跳转到下面页面的时候,总是盖 ...
- js实现页面下拉后展示导航,以及点击导航自动滑动到相关页面
//监控,下拉750px后展示导航 $(window).scroll(function(){ var $this = $(this); var targetTop = $(this).scrollTo ...
- DOM操作--表格点击行变色
点击表格行变色,这种网页效果应该还是比较常见的.大家应该看见了,我这里的效果是用DOM操作实现的,那么很多人会问什么是DOM操作,贴出代码之前我就和大家解释一下什么是DOM操作: DOM是Docume ...
- Fragment生命周期及实现点击导航图片切换fragment,Demo
PS:Fragment简介 Fragment是Android3.0后引入的一个新的API,他出现的初衷是为了适应大屏幕的平板电脑, 当然现在他仍然是平板APP UI设计的宠儿,而且我们普通手机开发也会 ...
- vue点击元素变色兄弟元素不变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用this属性实现点击按钮变色.选中效果
浏览器宿主的全局环境中,this指的是window对象. <script type="text/javascript"> console.log(this === wi ...
- iOS - push 或 pop或点击导航栏返回pop指定导航控制器
以前一直有个很疑惑的问题没有搞清楚 关于ios中 viewcontroller的跳转问题,其中有一种方式是采用navigationController pushViewController 的方法,比 ...
- Android:GridView中实现点击Item变色,再点击还原。
使用GridView时想实现点击其中的一个Item,该Item改变背景,再次点击Item变回原来的背景,网上搜了很多资料都没有看到类似的案例,但还是有所启发,现来分享我的做法. 首先,首先为GridV ...
随机推荐
- 浅析Postgres中的并发控制(Concurrency Control)与事务特性(下)
上文我们讨论了PostgreSQL的MVCC相关的基础知识以及实现机制.关于PostgreSQL中的MVCC,我们只讲了元组可见性的问题,还剩下两个问题没讲.一个是"Lost Update& ...
- php 内存分配新
https://yq.aliyun.com/articles/38307 https://yq.aliyun.com/ziliao/132720 http://blog.liyiwei.cn/%E3% ...
- XorPay 个人支付平台增加 个人支付宝支付接口
XorPay 今天新增 个人支付宝当面付 接口,欢迎大家使用. 「 XorPay 支付平台」 已经同时支持 个人微信支付接口 和 个人支付宝接口. 个人可用的 支付宝/微信支付 接口,支持 当面付 ...
- iOS开发中断言的使用—NSAssert()
原文链接:http://blog.csdn.net/univcore/article/details/16859263 断言(assertion)是指在开发期间使用的.让程序在运行时进行自检的代码(通 ...
- 2016级算法第六次上机-E.Bamboo之吃我一拳
Bamboo之吃我一拳 分析 当两个点的距离<=d时,才可以出拳,想要使得满足出拳条件的点对最少但不为0 寻找最近点对距离,得到的最近距离能够使得可以出拳的组数最少,因为除了最近点对外其他组合均 ...
- PCA简单实现
''' 总结一下PCA的算法步骤: 设有m条n维数据. 1)将原始数据按列组成n行m列矩阵X 2)将X的每一行(代表一个属性字段)进行零均值化,即减去这一行的均值 3)求出协方差矩阵C=1/m*(XX ...
- 配置不同站点不同版本PHP
Apache 配置 1.常规手动部署apache方法(不会apache配置的请先移步看下Apache基本手工配置方法),解压fcgid,取其mod_fcgid.so至modules目录 2.打开htt ...
- Go语言目录
为什么学习Go语言 第一章 环境搭建 Windows搭建Go语言环境 第二章 Go语言基础 Go语言介绍 Go语言命名 Go语言内置类型和函数 Go语言特殊函数介绍 Go语言运算符 第三章 Go语言程 ...
- Numpy:np.vstack()&np.hstack() flat/flatten
一 . np.vstack: 按垂直方向(行顺序)堆叠数组构成一个新的数组 In[3]: import numpy as np In[4]: a = np.array([[1,2,3]]) a.sh ...
- 手机端全局样式表整理(mobile)
@charset "utf-8";/* * filename: global.css * description: 全局样式(包含样式重置,公共常用 ...