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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
javascript之学会吝啬 精简代码
Apr 25 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
js module大战
Apr 19 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
isset和empty的区别
2007/01/15 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
基于php实现的验证码小程序
2016/12/13 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
js技巧--转义符"\"的妙用
2007/01/09 Javascript
一页面多XMLHttpRequest对象
2007/01/22 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
python getopt 参数处理小示例
2009/06/09 Python
Python功能键的读取方法
2015/05/28 Python
简单实现Python爬取网络图片
2018/04/01 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python 实现让字典的value 成为列表
2019/12/16 Python
python 两种方法删除空文件夹
2020/09/29 Python
Python Selenium库的基本使用教程
2021/01/04 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
幼儿园教师岗位职责
2014/03/17 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
消防安全承诺书
2014/05/22 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
行政人事主管岗位职责
2015/04/11 职场文书