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&FireFox兼容]JS对select操作
Jan 07 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
Mar 01 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
vue实现列表拖拽排序的功能
Nov 02 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
用Flash图形化数据(二)
2006/10/09 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
PHP中的替代语法介绍
2015/01/09 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
JavaScript版代码高亮
2006/06/26 Javascript
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
layui table 参数设置方法
2018/08/14 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
Python实现的拉格朗日插值法示例
2019/01/08 Python
python仿抖音表白神器
2019/04/08 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
全神贯注教学反思
2014/02/03 职场文书
见习报告格式范文
2014/11/08 职场文书
教师教育心得体会
2016/01/19 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
Python实现视频中添加音频工具详解
2021/12/06 Python