如何在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