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 11 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery属性选择器用法实例分析
Jun 28 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的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python常用模块用法分析
2014/09/08 Python
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
用python发送微信消息
2020/12/21 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
工程承包协议书
2014/10/20 职场文书
优秀团员个人总结
2015/02/26 职场文书
亮剑观后感300字
2015/06/05 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
Vue h函数的使用详解
2022/02/18 Vue.js