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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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操作excel文件 基于phpexcel
2010/07/02 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
Django如何实现内容缓存示例详解
2017/09/24 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
Python下简易的单例模式详解
2019/04/08 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
.net面试题
2016/09/17 面试题
领导证婚人证婚词
2014/01/13 职场文书
社区母亲节活动方案
2014/03/05 职场文书
2014年冬季防火方案
2014/05/21 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
读后感作文评语
2014/12/25 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
浅谈Python中对象是如何被调用的
2022/04/06 Python