jQ效果:地址栏链接与a标签链接匹配

本文介绍如何使用jQuery实现点击某个链接后,跳转到新的页面,并在跳转后给当前链接添加特殊的样式,例如添加class为'current'。通过遍历链接元素并检查当前URL是否与链接地址匹配,实现页面加载后的样式动态更新。

如题所述,当出现这样的功能,点击某个链接后,给跳转后的该链接地址添加样式,通过添加classcurrent来增加特殊样式。

如图所示:点击HTML+css3跳转后,给其添加如图样式:

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"));
})

这样就实现了如图所示的功能。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值