jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法


Posted in jQuery onJanuary 18, 2018

做项目的时候遇到这个问题,,按理说只要是会套模板的,就不该出现这种低级问题。然后我的后台并没有模板,,并且我的js,jquery水平是小学水平,所以这个也困扰了我将近一下午。在此总结一下,分享给大家。分享使我快乐!!!

一、请看代码,容我分析一下

jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法

1、首先,menu代表我的菜单列表,a标签即是点击的链接。大致思路是先获取a链接的对象,然后进行循环,先取得a链接的href的值。

2、获取跳转后,该页面的url的值。进行比较即可

3、在此需要注意,自己也打印一下,看看如何取值进行对比。

4、对比之后,Url相同的,去掉点击之前那个a对象的class属性,并给现在的a链接加上样式。

二、实现过程

写博客最怕的就是,一顿分析猛如虎,实际操作0/5,所以在此呢就进行一些步骤解析:

jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法

这个是调试对比的过程。

上面的是获取的a链接的href值。在此需要注意,因为是在循环状态,所以有很多个a链接的href值。

下面是获取该页面的url的值,有图可知,两个并不相等,是有细微的差异的,不过影响不大。

三,jquery对于字符串的截取

var length = String(window.location).lastIndexOf('?');
var url = String(window.location).substring(0,length);

1、jquery的lastIndexof返回的是该符号最后一次出现的位置,即数字。

由此我们可以得到url的?出现的位置

2、substring是截取字符串的函数。我们这里是表示,从第0位开始截取,截取的长度是length值。

3、截取成功之后:

if ($($(this))[0].href == url) {
  $('#menu li a').removeClass("selected");
  $(this).parent().addClass('selected');
  }

对比一下,url相等则加一些样式。

四、实现效果

jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法

这个就是效果图了。当实现点击“设备分类”栏目的时候,页面进行跳转,且跳转之后显示粉色,代表当前页面是该页面。

end.

最后吐槽下,这个markdown编辑器是真的不会用,写了好几次,排版还是一如既往的辣鸡。。。不会用啊不会用 TOT

以上这篇jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
基于jquery的on和click的区别详解
Jan 15 #jQuery
vue-cli webpack 引入jquery的方法
Jan 10 #jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 #jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 #jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 #jQuery
You might like
解析php中获取url与物理路径的总结
2013/06/21 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
js下用层来实现select的title提示属性
2010/02/23 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
Vue3为什么这么快
2020/09/23 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Python3 集合set入门基础
2020/02/10 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
python unichr函数知识点总结
2020/12/16 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
合作经营协议书
2014/04/17 职场文书
教师专业自荐信
2014/05/31 职场文书
放牛班的春天观后感
2015/06/01 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
python 镜像环境搭建总结
2022/09/23 Python