如何在 HTML5 页面中动态添加类到导航选项答案

【问题标题】：how to dynamically add a class to nav options in HTML5 page如何在 HTML5 页面中动态添加类到导航选项
【发布时间】：2018-05-15 20:23:31
【问题描述】：

我有以下为我的 html 页面创建菜单的包含文件：

function menu(){
    document.write("<nav>");
    document.write('<ul class="nav nav-pills pull-right dynamic-highlight">');
    document.write('<li role="presentation"><a href="index.html">List Widgets</a></li>');
    document.write('<li role="presentation"><a href="create_widget.html">Create Widget</a></li>');
    document.write('<li role="presentation"><a href="create_group.html">Create Widget Group</a></li>')
    document.write('<li role="presentation"><a href="department_widget_list.html">Department Widget List</a></li>')
    document.write('<li role="presentation"><a href="group_membership_list.html">Group Members List</a></li>')
    document.write('<li role="presentation"><a href="site_conf.html">Site Configuration</a></li>')
    document.write('</ul>')
    document.write('</nav>')
}

包含此菜单的每个页面都有这样的代码：

<head> 
    ... stuff....
    <script type="text/javascript" src="menu_html.js"></script>
</head>
<body>    
<div class="container"><br>
    <div class="header clearfix">
        <script type="text/javascript">
            menu();
        </script>

我添加了以下 javascript 来尝试查找所有“

" 在有问题的 "" 下，然后将 href 的名称与当前页面匹配。目标是将值 "active" 添加到类名中。但它不工作这是javascript：

    $(document).ready(function() {
        var loc = window.location.pathname;
        loc = loc.substring(1);
        console.log(loc);

        $('.dynamic-highlight').find('a').each(function() {
            console.log($(this).attr('href'))
            $(this).addClass('active', $(this).attr('href') == loc);
            //$(this).addClass("active");
        });

使用控制台输出，我可以看到当前位置的页面名称与 find 方法返回的项目匹配。但是 addClass 似乎不起作用，因为我最终没有突出显示菜单项。我也尝试过 .toggleClass 而不是 addClass。

编辑 1

我没有收到任何错误，但没有突出显示。所以我尝试打开 F12 窗口并使用 DOM Explorer，我尝试选择“

" 当前选中的有问题。它没有设置 class="active"。
只是为了确保“活动”是我想要的正确类，我硬编码/更改了我的包含，如下所示：

document.write('<li role="presentation" class="active"><a href="index.html">List Widgets</a></li>');

并刷新我的页面。我确实看到突出显示的“列表小部件”菜单项。

不知道还能尝试什么...

【问题讨论】：

Dynamically change CSS of link based on current page的可能重复

标签： javascript jquery html include

【解决方案1】：

我将首先更改menu() 函数以使用循环来编写链接。然后在循环时，检查路径名是否与链接匹配，如果匹配，则将活动类添加到 li。类似的东西

function menu(){
    var Links = {
        "index.html": "List Widgets",
        "create_widget.html": "Create Widgeth",
        "create_group.html": "Create Widget Group",
        "department_widget_list.html": "Department Widget List",
        "group_membership_list.html": "Group Members List",
        "site_conf.html": "Site Configuration"
    };
    var Class;

    document.write("<nav>");
    document.write('<ul class="nav nav-pills pull-right dynamic-highlight">');

    for (var Page in Links ) {
        if (!Links.hasOwnProperty(Page)) continue;
        Class = window.location.pathname == "/" + Page ? ' class="active"' : '';
        document.write('<li role="presentation"' + Class + '><a href="' + Page + '">' + Links[Page] + '</a></li>');

    }
    document.write('</ul>')
    document.write('</nav>')
}

【讨论】：

【解决方案2】：

如果你没有复杂的架构，并且不同文件夹中没有名称相似的文件，可以依靠window.location.pathname与锚href属性进行比较：

$(document).ready(function(){
   var pathname = (window.location.pathname).replace("/","");
   $("li[role='presentation']")
   .children("a[href*='"+ pathname+ "']")
   .parent()
   .addClass("active");
})

【讨论】：

阿里也不行。没有错误。请参阅编辑 1
我得到所有锚点，然后按条件过滤它们，然后将“活动”类设置为它们的父级li
您向儿童主播而不是他们的父母添加了活跃的班级li@dot