如何根据位置和相应的href添加类

How to add class based on location and corresponding href?

本文关键字：href 添加 何根 位置      更新时间：2023-09-26

我有一个带有简单标记的菜单，我的目标是根据当前页面的名称自动向菜单<li>项添加一个类。。。。

相关标记为：

    <ul class="sub-menu">
        <li >    
            <a href="page_example_one.html">
            <i class="icon-time"></i>
            Timeline</a>    
        </li>    
        <li >    
            <a href="page_example_two.html">
            <i class="icon-cogs"></i>
            Page Two</a>    
        </li>
.... Many other elements 
    </ul>

当我在某个页面上时，我需要得到的非常简单（假设page_example_one.html)我需要相应的<li>元素来有一个类似的附加类

<li class="active">
    <a href="page_example_one.html">
    <i class="icon-time"></i>
    Timeline</a>
</li>

我试着用jQuery这样做：

jQuery(document).ready(function() {
     // Get the current page name ( pathname)
            var currentUrl =  jQuery(location).attr('pathname');
            // Get the element ( try at least )
            var currentMenuItem = jQuery("sub-menu li a[href='" + currentUrl + "']");
            // Add the class
            currentMenuItem.addClass("active");
                //Tried also something like this : 
                // jQuery("sub-menu li a[href='" + currentUrl + "']").find('a').addClass("active");

        });

以上两种方法对我来说都失败了-（带VAR的注释方法和串联方法）但因为我的JS技能很低，我真的看不出我做错了什么（可能对了解JS的人来说很明显）

在解决了这个问题之后，我还想知道如何基于当前页面链接将跨度或类也添加到父菜单项（在子菜单的情况下）。。。

var currentMenuItem = jQuery("a[href='" + currentUrl + "']").parent()

在此处添加演示

通过其类ul.sub-menu将子菜单作为目标。另外，您还可以通过.sub-menu更广泛地针对类中的所有项目。单独的CCD_ 5将靶向理论上的<sub-menu>元素。

获取链接的父级（<li>）：

var currentMenuItem = jQuery(".submenu li a[href='" + currentUrl + "']").parent();

还要检查currentUrl是否等于href。您可以将currentUrl输出到控制台进行调试，如下所示：

console.log(currentUrl);
相关文章：