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.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
js实现筛选功能
2020/11/24 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
python中subprocess批量执行linux命令
2018/04/27 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python中交换两个元素的实现方法
2018/06/29 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python可迭代对象操作示例
2019/05/07 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
Python类型转换的魔术方法详解
2020/12/23 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
美国地毯购买网站:Rugs USA
2019/02/23 全球购物