jquery地址栏链接与a标签链接匹配之特效代码总结


Posted in Javascript onAugust 24, 2015

如题所述,当出现这样的功能,点击某个链接后,给跳转后的该链接地址添加样式,通过添加class为current来增加特殊样式。

如图所示:点击HTML+css3跳转后,给其添加如图样式:

jquery地址栏链接与a标签链接匹配之特效代码总结

js代码如下:

var currUrl = window.location.href;
   var currStyle = function (links){
     links.each(function(){
        var url = $(this).attr('href');
        if (currUrl.indexOf(url) != -1){
          $(this).addClass("current");
          return false;
        }
     });
}

怎样调用呢?

如下jquery调用代码:

$(function(){
  currStyle($("#sidebar .list a"));
})

这样就实现了如图所示的功能。

javascript和jquery修改a标签的href属性

javascript代码如下:

document.getElementById("myId").setAttribute("href","www.xxx.com"); 
document.getElementById("myId").href = "www.xxx.com";

jquery:代码如下:

$("#myId").attr("href","www.xxx.com");

以上内容就是本文的全部内容,希望大家喜欢。

Javascript 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
再谈javascript原型继承
Nov 10 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
js实现显示手机号码效果
Mar 09 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 #Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 #Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 #Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 #Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 #Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 #Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
python实现教务管理系统
2018/03/12 Python
python安装scipy的方法步骤
2019/06/26 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python实现银行账户系统
2021/02/22 Python
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
火锅店营销方案
2014/02/26 职场文书
上课说话检讨书500字
2014/11/01 职场文书
先进教师个人总结
2015/02/11 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
Python如何加载模型并查看网络
2022/07/15 Python