Setting an “active” class and href attribute for link based on the current page's metadata
Question
I have three pages which all contain a navbar with three links,
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact</a>
</li>
</ul>
also each page has a <meta name="application-name" content="[PAGENAME]"> . Inside the navbar, I want the link that matches the page's <meta name="application-name" content="[PAGENAME]"> to automatically change one of their link to href="#" and add a class of active .
Code:
<head> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <meta name="application-name" content="Home"> </head> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="/home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="/about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="/contact">Contact</a> </li> </ul> </div> </nav>
Any suggestions on how to make this function work?
2 answers
solution1
0 ACCPTED 2019-08-28 16:15:23
Here's what I came up with. I first made a reference the meta tag and got its information, then looped over your links and added the class if necessary. Also note that I added a data-page attribute to your links to make for a better match of data. I considered slicing the href but realized that could insert problems later on. If the meta tag will always match the what you have inside the anchor, you could also compare the page title to the links[i].innerHTML and that will work just as well.
let metas = document.getElementsByTagName('meta'); // Find the tag and get its content let pageTitle; for(let i = 0; i < metas.length; i++) { if(metas[i].getAttribute("name") === "application-name") { pageTitle = metas[i].getAttribute("content"); } } // Find the nav a and give it the link let container = document.getElementById("navbarSupportedContent"); let links = container.getElementsByClassName("nav-link"); for(let i = 0; i < links.length; i++) { if(links[i].getAttribute("data-page").toLowerCase() === pageTitle.toLowerCase()) { links[i].className += " active"; links[i].href = "#"; } }
<head> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <meta name="application-name" content="Home"> </head> <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="/home" data-page="home">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="/about" data-page="about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="/contact" data-page="contact">Contact</a> </li> </ul> </div> </nav>
solution2
0 2019-08-28 16:32:18
So, if you have three stand alone html pages, there's nothing to keep you from just adding a class to the <body> element and then with javascript look at the body class attribute and find the appropriate href. You could do this easily with Jquery.
var bodyClass = $('body').attr('class');
$('[href="/' + bodyClass + '"]').addClass('active');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.