【jQuery】导航栏动态添加active的两种方式

我是一个甜甜的大橙子🍊,欢迎关注✉️!
我相信技术的力量💪
努力将所学分享给大家😎
你的点赞❤️分享🚀收藏📖就是对我最大的鼓励!

下面的代码是示例,需结合自己的结构进行调整。
方式一:找到url和标签的对应关系,直接通过id定位的方式给标签加上active

{# 侧边栏动态激活,需要给标签加id #}
var url_array = document.location.pathname.split("/");
    s1 = url_array[1];
    s2 = url_array[2];
    if (s1 === ''){
        $('#index').addClass('active')
    } else {
        $("#"+s1).addClass('open');
        $("#"+s2).addClass('active')
    }

方式二:找到urla标签href对应关系,需要遍历一部分标签,通过判断urla标签href相同的方式给标签加上active

{# 侧边栏动态激活,通过当前url判断 #}
$(function () {
    $(".sidebar-main").find("li").each(function () {
        var a = $(this).find("a:first")[0];
        if ($(a).attr("href") === location.pathname) {
            $(this).parents("li").addClass("open");
            $(this).addClass("active");
        } else {
            $(this).removeClass("active");
        }
    });
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一个甜甜的大橙子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值