jQuery在菜单上添加类.active

发布时间:2020-01-19 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了jQuery在菜单上添加类.active大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个问题。

我想在相关页面打开时在项目菜单上添加类“活动”。

菜单很简单:

<div class="menu">

<ul>
<li><a href="~/link1/">LINK 1</a>
<li><a href="~/link2/">LINK 2</a>
<li><a href="~/link3/">LINK 3</a>
</ul>

</div>

在jQuery我需要检查,如果url是www.xyz.com/other/link1/

如果是这个我想添加一个类一个’a’元素的link1。

我尝试许多解决方案,但没有工作。

解决方法

Click here解决方案在jsFiddle

你需要的是你需要得到window.location.pathname如上所述,然后从它创建regexp并测试它对导航hrefs。

$(function(){

    var url = window.location.pathname,urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
        // now grab every link from the navigation
        $('.menu a').each(function(){
            // and test its normalized href against the url pathname regexp
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                $(this).addClass('active');
            }
        });

});

大佬总结

以上是大佬教程为你收集整理的jQuery在菜单上添加类.active全部内容,希望文章能够帮你解决jQuery在菜单上添加类.active所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。