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 相关文章推荐
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
Vue异步加载about组件
Oct 31 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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过滤敏感词的示例
2014/03/31 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
Python 如何测试文件是否存在
2020/07/31 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
企业授权委托书范本
2014/04/02 职场文书
入党介绍人评语
2014/05/06 职场文书
情况说明书格式范文
2014/05/06 职场文书
初中学校对照检查材料
2014/08/19 职场文书
前台岗位职责范本
2015/04/16 职场文书
开票证明
2015/06/23 职场文书
如何撰写促销方案?
2019/07/05 职场文书