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

Question

我有以下包含文件，可为我的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>');

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

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

Answer 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>')
}

Answer 2

如果您没有复杂的体系结构，并且在不同文件夹中没有名称相似的文件，则可以依靠window.location.pathname与anchor href属性进行比较：

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

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-05-15 20:59:35

解决方案2
0 2018-05-15 20:48:06

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-05-15 20:59:35

解决方案2 0 2018-05-15 20:48:06

解决方案1
1 已采纳 2018-05-15 20:59:35

解决方案2
0 2018-05-15 20:48:06