Question

所以我正在研究一个网页设计项目，我遇到了一些我一直试图解决的问题。我一直在努力根据当前页面的网址突出显示不同的导航链接。它适用于我一直在处理的每个页面，除了通过根链接到该页面的索引页面。即使知道这个问题可能看起来很小，如果其他一切都有效，但它确实让我感到困扰，嘿，我喜欢一个很好的挑战。我一直在尝试在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 锚元素

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

Answer 2

试试Jonathan Snook的这段代码

/*
CLCP v2.1 Clear Links to Current Page
Jonathan Snook
This code is offered unto the public domain
http://www.snook.ca/jonathan/
*/

window.onload = clearCurrentLink;

function clearCurrentLink(){
    var a = document.getElementsByTagName("A");
    for(var i=0;i<a.length;i++) if(a[i].href="=" window.location.href.split("#")[0])="" removenode(a[i]);="" }="" function="" removenode(n){="" if(n.haschildnodes())="" gets="" the="" text="" from="" link="" and="" moves="" it="" to="" previous="" node.="" for(var="" i="0;i<n.childNodes.length;i++)" {="" var="" strong="document.createElement('strong');" label="n.childNodes[i].cloneNode(true);" strong.appendchild(label);="" n.parentnode.appendchild(strong);="" n.parentnode.removechild(n);="" <="" pre="">
</a.length;i++)>

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

2 个答案: