Question

我有以下嵌套的ul li树结构

<ul id='main-menu'>
    <li>
        <a href=""><div>About Us</div></a>
        <ul>
            <li>
                <a href=""><div>Know Us</div></a>
            </li>
            <li>
                <a href=""><div>History</div></a>
                <ul>
                    <li>
                        <a href=""><div>Mission</div></a>
                    </li>
                    <li>
                        <a href=""><div>Vision</div></a>
                    </li>
                    <li>
                        <a href=""><div>Milestones</div></a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

所以这里最顶级的元素是＆＃34;关于我们＆＃34;，我想要做的是当关于我们的任何子链接打开时我想要向About US li添加课程以显示它是活动的，我尝试了不同的方式，但没有成功，任何人都可以帮助我吗？我知道jquery

Answer 1

您可以在“关于我们”链接和document.ready上添加一个id（用于更简单地标识菜单元素），对于可以从“关于我们”菜单访问的每个页面，您将添加一个类“关于我们”菜单

$( document ).ready(function() {
   $('#aboutUsLink').addClass('active-menu');
});

Answer 2

首先，您必须记住，每次点击特定链接时，您的浏览器都会加载全新的页面。所以最好的选择是在服务器端添加这个“活动”类（php，ASP等）

但如果您真的必须在浏览器端添加它，您只需在每个网站上添加一个带代码的JavaScript：

$(function(){
  var pageName = (window.location.href || '').trim().toLowerCase().match(/[^\/]+$/gm);
  var linkToThePage = $('a[href="'+pageName+'"]:first-of-type', $('#main-menu'));
  var allParentLi = linkToThePage.parents('li');
  allParentLi.addClass('selected');
});

我在这里实现了这个：https://plnkr.co/edit/Lwy8TQ8IFyadERkMzo71

您可以运行它并点击“Vision”或“里程碑”链接。

使用jquery在嵌套的ul li中向top li元素添加类

2 个答案: