4

我已经硬编码了一个子导航，并希望通过简单地向这些链接添加一个“活动”类来突出显示当前页面的导航栏项目。但是下面的 HTML 标记与 javascript 结合将活动类添加到每个 li(.irp-menu-item) 而不仅仅是最近的 li。脚本必须只将类添加到最近的 li 而不是其他类，但不知何故我无法解决这个问题。

HTML标记：

<nav id="irp-subnav" class="css-sticky" role="navigation" aria-label="irp-subnav" lang="de-DE">
   <div class="irp-wrapper">
        <div class="irp-background"></div>
        <div class="irp-content">
            <span class="irp-title">
                  TITLE</span>
            <div class="irp-menu">
            <div class="irp-menu-tray">
                <ul class="irp-menu-items">
                  <li class="irp-menu-item"><a href="/LINK-1/" class="irp-menu-link">LINK 1</a>
                                                    </li>
                  <li class="irp-menu-item"><a href="/LINK2/" class="irp-menu-link">LINK 2</a>
                                                    </li>
                  <li class="irp-menu-item"><a href="/LINK3/" class="irp-menu-link">LINK3</a>
                </ul>
            </div>
            <div class="irp-actions irp-actions-right">
                <div class="irp-action irp-action-menucta" aria-hidden="true">

                    <label for="irp-menustate" class="irp-menucta"> <span class="irp-menucta-chevron"></span>
                            </label>
                </div>
            </div>
        </div>
        </div>
    </div>
</nav>

Javascript：

jQuery(document).ready(function($) {
$(function () {
var url = window.location.pathname; 
var activePage = url.substring(url.lastIndexOf('/') + 1); 
    $('.irp-menu-item .irp-menu-link').each(function () { 
        var linkPage = this.href.substring(this.href.lastIndexOf('/') + 1); 

        if (activePage == linkPage) { 
            $(this).closest("li").addClass("active"); 
        }
    });
})
});
4

3 回答 3

9

使用下面给出的 Javascript 代码和样式，并包含在您的标题中：

<style>
    a.current {
        color: orange !important;
    }
</style>
<script>
    $(function () {
        $('.irp-menu li a').each(function () {
            if ($(this).prop('href') == window.location.href) {
                $(this).addClass('current');
            }
        });
    });
</script>
于 2018-03-13T14:12:22.327 回答
2

您使用的函数“子字符串”错误。

string.substring(start,end)

start: 必填。

end: 可选。

正确的语法是：

jQuery(document).ready(function($) {
    var url = window.location.pathname; 
    var activePage = url.substring(0, url.lastIndexOf('/') + 1); 
    $('.irp-menu-item .irp-menu-link').each(function () { 
        var linkPage = this.href.substring(0, this.href.lastIndexOf('/') + 1); 

        if (activePage == linkPage) { 
            $(this).closest("li").addClass("active"); 
        }
    });
});

在以下演示中，我仅使用静态 url 进行测试： https ://jsfiddle.net/5ca45spe/2/

于 2016-06-02T01:52:38.050 回答
1

我已经编辑了 Rami 的答案以使用整个 href。

//this makes the current link containing li of class "active"
$(document).ready(function ($) {
    var url = window.location.href;
    var activePage = url;
    $('.irp-menu-item a').each(function () {
        var linkPage = this.href;

        if (activePage == linkPage) {
            $(this).closest("li").addClass("active");
        }
    });
});
于 2016-09-07T19:10:17.723 回答