javascript - 如何在根页面上突出显示索引导航链接

Question

因此，我正在从事一个网页设计元素，但遇到了一些我一直试图解决的问题。我一直致力于根据当前页面的 url 突出显示不同的导航链接。当您通过根链接登陆到该页面时，它适用于我一直在处理的每个页面，但索引页面除外。如果其他一切正常，即使知道这个问题也可能看起来微不足道，但这确实让我有点困扰，嘿，不过我喜欢一个很好的挑战。我一直在尝试在 jquery 中进行设置，以便在有人位于根链接时索引链接会突出显示，但我没有成功。我也不知道要尝试什么。如果有人能给我帮助那就太好了。

这是所有相关的代码片段

HTML:

<nav class="main">
            <ul>
                <li><a href="index.html" class="pink">Home</a></li>
                <li><a href="about.html" class="orange">About</a></li>
                <li><a href="contact.html" class="purple">Contact</a></li>
            </ul>
        </nav>

CSS:

    nav.main ul li a
    {
    color: #000000;
    font-size: 1.57em;
    padding: 0.1em 1.5em;
    padding-top: 0.3em;
    border-bottom: 5px solid transparent
    }

    nav.main ul li a.pink:hover
    {
    border-bottom: 5px solid #d9618f;
    transition: 295ms ease;
    }

    nav.main ul li a.apink
    {
    border-bottom: 5px solid #d9618f;
    }

    nav.main ul li a.orange:hover
    {
    border-bottom: 5px solid #5ee9ef;;
    transition: 295ms ease;
    }

    nav.main ul li a.aorange
    {
    border-bottom: 5px solid #5ee9ef;
    }

    nav.main ul li a.purple:hover
    {
    border-bottom: 5px solid #9648a5;
    transition: 295ms ease;
    }

    nav.main ul li a.apurple
    {
    border-bottom: 5px solid #9648a5;
    }

jQuery:

$(function () {

    $('nav.main ul li a[href="index.html' + location.pathname.split("index.html")[1] + '"]').addClass('apink');

    $('nav.main ul li a[href="about.html' + location.pathname.split("about.html")[3] + '"]').addClass('aorange');

    $('nav.main ul li a[href="contact.html' + location.pathname.split("contact.html")[4] + '"]').addClass('apurple');

    $('nav.main ul li a[href="index.html' + location.pathname.split("schedule.html")[5] + '"]').addClass('apink');

    $('nav.main ul li a[href="contact.html' + location.pathname.split("thanks.html")[6] + '"]').addClass('apurple');


});

Answer 1

在您的根页面内，将类添加到 index.html anchor 元素

$("nav.main ul li a:first-child").addClass('apink');