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

how to highlight index nav link when on root page

本文关键字：显示 索引 导航 链接      更新时间：2023-09-26

我正在做一个网页设计项目，我遇到了一些问题，我一直在努力解决。我一直致力于根据当前页面的url突出显示不同的导航链接。它适用于我一直在工作的每个页面，除了索引页，当你通过根链接登陆到那个页面。即使知道这个问题可能看起来微不足道，如果一切正常，但它确实让我有点困扰，嘿，我喜欢一个好的挑战。我一直试图在jquery中设置它，这样每当有人在根链接时索引链接就会突出显示，但我没有成功。我也不知道该尝试什么。如果有人能帮助我，那就太好了。

这是所有相关的代码

: 

<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');

});

在根页面中，将class添加到index.html锚元素

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

试试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++)>
相关文章：