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 21 jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
zf框架的registry(注册表)使用示例
2014/03/13 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
php命令行写shell实例详解
2018/07/19 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
2017/06/19 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
新手简单了解vue
2019/05/29 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
环境科学专业研究生求职信
2013/10/02 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
花坛标语大全
2014/06/30 职场文书
关键在于落实心得体会
2014/09/03 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python