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 prototype,executing,context,closure
Dec 24 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
JavaScript字符串对象
Jan 14 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
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输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
input的focus方法使用
2010/03/13 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
js常用代码段整理
2011/11/30 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python正则表达式教程之一:基础篇
2017/03/02 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
资深生产主管自我评价
2013/09/22 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
开会通知
2015/04/20 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书