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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
js 目录列举函数
Nov 06 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
vue实现计步器功能
Nov 01 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 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提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
php实现简单加入购物车功能
2017/03/07 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
jquery validate demo 基础
2015/10/29 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
python 星号(*)的多种用途
2020/09/21 Python
详解python的变量缓存机制
2021/01/24 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
什么是SCM(软件配置管理)
2014/08/16 面试题
学生会离职感言
2014/02/11 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
学校通报表扬范文
2015/05/04 职场文书
《认识钟表》教学反思
2016/02/16 职场文书