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中定义私有方法说明(private method)
Jan 27 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
js获取url传值的方法
Dec 18 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
react-native android状态栏的实现
Jun 15 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
详解vue 图片上传功能
Apr 30 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
Element Alert警告的具体使用方法
Jul 27 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操作SVN版本服务器类代码
2011/11/27 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Python计算一个文件里字数的方法
2015/06/15 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python制作抖音代码舞
2019/04/07 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
彻底解决Python包下载慢问题
2020/11/15 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
毕业生求职的求职信
2013/12/05 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
国庆宣传标语
2014/06/30 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
Python中的 No Module named ***问题及解决
2022/07/23 Python