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

简介: 导航栏动态添加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");
        }
    });
});
相关文章
|
6月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
52 0
|
8月前
|
JavaScript
jQuery 动态添加表格数据
jQuery 动态添加表格数据
29 0
|
8月前
|
JavaScript 前端开发
jQuery 页面顶部滚动中固定导航栏
jQuery 页面顶部滚动中固定导航栏
25 0
|
JavaScript Java
动态添加表格并增加Jquery校验
动态添加表格并增加Jquery校验
73 0
|
前端开发 JavaScript
前端:侧边固定导航栏jQuery实现定位
前端:侧边固定导航栏jQuery实现定位
225 0
|
JavaScript 前端开发 索引
jQuery 实现导航栏切换
jQuery 实现导航栏切换
jQuery 实现导航栏切换