javascript 导航_使用JavaScript的自我意识站点导航

javascript 导航

Right now my first year students are presenting the mockups for their sites in a class critique. A number of the designs have a navigation bar that highlights the current page. While it’s possible to add this feature by inserting an inline style into the appropriate link in the navigation bar of each page, doing so prevents it from being used as an include(), and ruins scalability.

现在，我的一年级学生正在以课堂评论的形式介绍他们网站的样机。 许多设计都有一个导航栏，突出显示当前页面。 尽管可以通过在每个页面的导航栏中的相应链接中插入内联样式来添加此功能，但这样做会阻止将其用作include() ，并破坏了可伸缩性。

Previously, I’ve shown how to achieve this effect with PHP and JQuery, but the most efficient method requires neither server-side technology nor frameworks.

之前，我已经展示了如何使用PHP和JQuery实现这种效果，但是最有效的方法既不需要服务器端技术也不需要框架。

标记 (The Markup)

The HTML for this example could take practically any context; the important part is the identifier on the wrapping element. For this example, I’ll use a <nav>:

该示例的HTML几乎可以采用任何上下文。 重要的部分是包装元素上的标识符。 在此示例中，我将使用<nav> ：

<nav id="main">
	<a href="/845/Self-Aware-Site-Navigation-With-JavaScript">This Page</a>
	<a href="/865/A-Complete-Web-Development-Reading-List-for-HTML>HTML</a>
	<a href="/919/A-Complete-Reading-List-For-CSS">CSS</a>
</nav>

CSS (The CSS)

The presentation rules for the navigation bar are fairly straightforward:

导航栏的显示规则非常简单：

@keyframes underline {
	to { border-bottom: 5px solid hsla(20,90%,50%, 1); }
}
#mainnav {
	text-align: center;
	margin: 2rem;
	font-size: 2rem;
}
#mainnav a {
	display: inline-block;
	text-transform: uppercase;
	margin: 1rem;
	text-decoration: none;
	color: inherit;
	letter-spacing: .1rem;
}

To this we’ll add a special class to indicate the current page. In this case, we’re calling on the animation:

为此，我们将添加一个特殊的类来指示当前页面。 在这种情况下，我们调用动画：

a.current {
	animation: 2s underline forwards;
	font-weight: 900;
}

This class won’t be applied in our HTML, but in the DOM, via JavaScript, which is what we’ll look at next.

此类不会在我们的HTML中应用 ，但会通过JavaScript在DOM中应用 ，这是我们接下来要介绍的内容。

JavaScript (The JavaScript)

In the script added to the end of the page we need to identify the current URL in the browser, strip everything out except the page name, and match the result against the links in the navigation bar: the href value that matches will be the current page. We’ll then apply the appropriate class to the corresponding link.

在添加到页面末尾的脚本中，我们需要在浏览器中标识当前URL，去除页面名称以外的所有内容，并将结果与​​导航栏中的链接进行匹配：匹配的href值将是当前的页。 然后，我们将适当的类应用于相应的链接。

function cleanPath(path) {
	path = path.split("/").pop()
	path = path.split('#')[0];
	return path = path.split('?')[0]; 
}
	
var links = document.querySelectorAll("#mainnav a"),
currentURL = cleanPath(window.location.href);
	
for (var i=0; i < links.length; i++) {
	if (currentURL == cleanPath(links[i].href) ) {
		links[i].classList.add("current");
	}
}

The applied class brings in the animation for the current link in the navigation bar.

应用的类在导航栏中为当前链接引入动画。

翻译自: https://thenewcode.com/845/Self-Aware-Site-Navigation-With-JavaScript

javascript 导航