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 相关文章推荐
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
返回上一个url并刷新界面的js代码
Sep 12 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
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
常用的javascript设计模式
2017/01/11 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
运动检测ViBe算法python实现代码
2018/01/09 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python实现归并排序算法
2018/11/22 Python
python实现二维插值的三维显示
2018/12/17 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
python 写一个性能测试工具(一)
2020/10/24 Python
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
25岁生日感言
2014/01/13 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
中秋节祝酒词
2015/08/12 职场文书
Python 中random 库的详细使用
2021/06/03 Python
python unittest单元测试的步骤分析
2021/08/02 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers