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 相关文章推荐
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
React实现todolist功能
Dec 28 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
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
python创建进程fork用法
2015/06/04 Python
python比较两个列表是否相等的方法
2015/07/28 Python
简单谈谈python中的语句和语法
2017/08/10 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python实现京东秒杀功能
2018/07/30 Python
python迭代器常见用法实例分析
2019/11/22 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
基于Python的OCR实现示例
2020/04/03 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
python中entry用法讲解
2020/12/04 Python
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
一份Java笔试题
2012/02/21 面试题
函授本科自我鉴定
2014/02/04 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
爱心捐书倡议书
2015/04/27 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书