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 相关文章推荐
分享一个常用的javascript静态类
Dec 31 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
vue.js的提示组件
Mar 02 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
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学习笔记 类的声明与对象实例化
2011/06/13 PHP
php学习之function的用法
2012/07/14 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PHP7 list() 函数修改
2021/03/09 PHP
javascript中关于执行环境的杂谈
2011/08/14 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
JS不完全国际化&本地化手册 之 理论篇
2016/09/27 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
回顾Javascript React基础
2019/06/15 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Python控制Firefox方法总结
2019/06/03 Python
python重要函数eval多种用法解析
2020/01/14 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
python 递归相关知识总结
2021/03/03 Python
用Python写一个for循环的例子
2016/07/19 面试题
大学新生军训感言
2014/02/25 职场文书
初中家长寄语
2014/04/02 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
记者节感言
2015/08/03 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
搭建Yolov5服务器
2022/04/30 Servers