根据当前页面的元数据设置链接的“活动”类和href属性
[英]Setting an “active” class and href attribute for link based on the current page's metadata
问题描述
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]"> . 每个页面都有一个<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 . 在导航栏中，我希望与页面<meta name="application-name" content="[PAGENAME]">的链接自动将其链接之一更改为href="#"并添加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 个解决方案
解决方案1
0 已采纳 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. 我首先引用了meta标签并获取了其信息，然后遍历了您的链接，并在必要时添加了类。 Also note that I added a data-page attribute to your links to make for a better match of data. 还要注意，我向您的链接添加了data-page属性，以使数据更好地匹配。 I considered slicing the href but realized that could insert problems later on. 我考虑过切片href，但意识到以后可能会插入问题。 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. 如果meta标记将始终与锚点中的标记匹配，则还可以将页面标题与links[i].innerHTML进行比较，效果也一样。
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>
解决方案2
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. 因此，如果您有三个独立的html页面，则没有什么可以阻止您将类添加到<body>元素，然后使用javascript查看body class属性并找到合适的href。 You could do this easily with Jquery. 您可以使用Jquery轻松做到这一点。
var bodyClass = $('body').attr('class');
$('[href="/' + bodyClass + '"]').addClass('active');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.