jq修改导航栏样式(选中、使用两张图片替代的是否选中效果)
1 <footer class="toolbar"> 2 <ul> 3 <li> 4 <a href="{:url('Index/home')}"> 5 <img src="__STATIC__/img/f1.png" alt=""> 6 <span>首页</span> 7 </a> 8 </li> 9 <li> 10 <a href="{:url('Goods/category_list')}"> 11 <img src="__STATIC__/img/f2.png" alt=""> 12 <span>分类</span> 13 </a> 14 </li> 15 <li class="vip_img"> 16 <a href="{:url('Gift/gift_mall')}"> 17 <img src="__STATIC__/img/f3.png" alt=""> 18 </a> 19 </li> 20 <li> 21 <a href="{:url('Cart/cart_list')}"> 22 <img src="__STATIC__/img/f4.png" alt=""> 23 <span>购物车</span> 24 </a> 25 </li> 26 <li> 27 <a href="{:url('Ucenter/my_home')}"> 28 <img src="__STATIC__/img/f5.png" alt=""> 29 <span>我的</span> 30 </a> 31 </li> 32 </ul> 33 </footer> 34 35 <script type="text/javascript"> 36 $(function(){ 37 var navLi=$('.toolbar li') //此处填写你的导航html对象 38 var windowUrl=window.location.href; //获取当前url链接 39 navLi.each(function(){ //遍历获取到的url 40 var t=$(this).find('a').attr('href');//获取遍历的url地址 41 if(t==windowUrl.replace(/^http:\/\/[^/]+/, "")){ //去掉域名 42 var src = $(this).find('img').attr('src').replace(/.png/, "y.png"); //获取新的地址 43 $(this).find('img').attr('src',src); //替换地址 44 } 45 }) 46 }) 47 </script>
转载于:https://www.cnblogs.com/zdzdbk/p/10195192.html
jq修改导航栏样式(选中、使用两张图片替代的是否选中效果)相关推荐
- ios 系统状态栏样式修改_iOS 一种新的修改导航栏样式的方法(支持iOS10).
iOS 一种新的修改导航栏样式的方法. 开宗明义: 对系统导航栏最底层的UIView加一层CALayer, 通过操作这个自己创建的CALayer来修改导航栏样式. 修改系统导航栏样式的几种方法 1.使 ...
- Android 修改导航栏样式
修改背景色为透明 window.setNavigationBarColor(Color.TRANSPARENT); 导航栏背景对比度 为true会有灰色阴影,若为false才能完全透明 window. ...
- 修改bootstrap导航栏样式(颜色,高)
提示:记录bootstrap导航栏样式(颜色,高)的修改 文章目录 前言 一.bootstrap导航栏样式 (颜色,高) 的修改 前言 在写自适应网页时想使用bootstrap实现,但与原稿的有一些差 ...
- 微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: {&q ...
- 导航栏样式HTML,[JavaScript 实例] 导航栏几种常见样式
这里记录下导航栏几种常见的样式,仅供大家参考. 导航栏1 (原生 JS 代码) 比较常见也比较简单的导航栏 ,用的 JavaScript 原生代码,大致思路是通过改变 li 元素的 className ...
- React-Native 之 GD (二)自定义共用导航栏样式
1.自定义导航栏样式 步骤一:从效果图中可以看出,导航栏的样式都差不多,因为我们前面已经设置了 Navigator ,这边的话我们还需要自定义 Navigator 的样式,可以看到所有的 Naviga ...
- React Navigation 导航栏样式调整+底部角标消息提示
五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...
- uniapp-自定义导航栏样式不生效问题(一)
刚接触uniapp不久,这是我踩到的最心酸的坑T^T 1.我设置了一个自定义组件,用作导航栏,结果出bug了,如下图: 2.首先,h5端是完全没有问题的,可以正常显示,就是微信开发者工具排版错乱了 3 ...
- uniapp 动态修改导航栏 之前使用this.$mp.page page提示未定义
uniapp 动态修改导航栏 // 使用条件编译 防止H5报错// #ifdef APP-PLUSlet pages = getCurrentPages();let page = pages[page ...
最新文章
- 将字符串a复制到字符串b
- 数据的gzip压缩解压缩_使用GZIP和压缩数据
- 数据算法与结构基本知识
- java订单类_基于Java创建一个订单类代码实例
- python选择题题库百度文库_大学Python程序题题库
- mybatis 使用in 查询时报错_不会Mybatis?一文教你手写实现Mybatis(超详细),吊打面试官!...
- 锁定计算机好在下游戏吗,巧用win7锁定计算机防止孩子沉迷游戏
- LeetCode112. 路径总和(DFS)(递归)
- Atitit mybatis spring整合。读取spring、yml、文件的mysql url 步骤,读取yml,文件,使用ongl定位到url pwd usr 读取mybatis模板配置,
- LBP特征提取(C++实现)
- 第一(关于list及dict)
- 常用的办公软件有哪些?
- 【五一创作】Qt quick基础1(包含基本元素Text Image Rectangle的使用)
- 【无标题】Java画板简易实现
- 基于Maple的超静定连续梁内力求解器的实现
- pythonocc安装_PythonOCC开发-如何搭建开发环境和一个创建圆台例子
- 数据与知识管理属于计算机科学研究方向中,基于知识的应用生命周期管理研究-计算机科学与技术专业论文.docx...
- 创新发明与专利实务的尔雅答案
- SB mybatis 实现分页查询以及 分页查询请求和返回的封装
- 基于STM32的HX711模块的电子秤设计