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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
echarts多条折线图动态分层的实现方法
May 24 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
jquery实现点击弹出对话框
Feb 08 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无限分类的类
2007/01/02 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
redis+php实现微博(一)注册与登录功能详解
2019/09/23 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
AngularJS内置指令
2015/02/04 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python Selenium 库的使用技巧
2020/10/16 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
如何获得EntityManager
2014/02/09 面试题
无故旷工检讨书
2014/01/26 职场文书
出生公证委托书
2014/04/03 职场文书
2014年教师节寄语
2014/08/11 职场文书
解放思想演讲稿
2014/09/11 职场文书
2014年教务工作总结
2014/12/03 职场文书
技术入股合作协议书
2016/03/21 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技