Question

我有一个带有简单标记的菜单，我的目的是通过当前页面的名称自动在菜单<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>

我试着用jQuerylike这样做：

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的人来说非常明显）

解决了这个问题之后，我还想知道如何根据当前页面链接向父菜单项（如果是子菜单）添加跨度或类...

Answer 1

按类ul.sub-menu定位子菜单。另外，您还可以通过.sub-menu更频繁地定位所有项目。仅sub-menu就会定位理论<sub-menu>元素。

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

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

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

console.log(currentUrl);

Answer 2

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

添加演示here

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

2 个答案: