所以我对网络编程很陌生，并试图找出一种有效，有组织，最简单的方法来组建一个网站。我几乎有整个网站编码（tristangianola.com），但现在我在每个html文件中明确地手工编写了导航栏的代码。但现在我正在尝试将导航栏放在一个html文件中，并使用Ajax的“ng-include”将其导入每个网页。我的问题是......如何更改ng-included文件中的特定标签，以便......根据打开的网页，该链接会点亮不同的颜色。
以下是各自文件中的导航条形码：
<!DOCTYPE html>
<html>
<body>
<!--site navigation / toolbar-->
<nav class="menu">
<ul>
<li id="home"><a href="index.html">Home</a></li>
<li id="about"><a href="about.html">About</a></li>
<li id="media"><a href="media.html">Media</a></li>
<li id="calendar"><a href="calendar.html">Calendar</a></li>
<li id="projects">
<a href="projects.html">Projects</a>
<ul class="sub-menu">
<li><a href="Bushcraft.html">Bushcraft</a></li>
<li><a href="Spicerack.html">SpiceRack</a></li>
<li><a href="LowTones.html">Low Tones</a></li>
<li><a href="JohnMclaughlin.html">Being John Mclaughlin</a></li>
</ul>
</li>
<li id="contact"><a href="contact.html">Contact</a></li>
</ul>
</nav>
我想要做的是在各个网页（例如media.html）中，我希望通过ID获取li属性并将标记替换为标记，以便css将链接更改为蓝色。 ng-include仍然是一个很好的方法吗？
答案 0 :(得分：0)
这是一个非常常见的问题，有tons选项，但我的建议是做类似于Chris Coyer的事情。您可以只添加一个类，而不是替换标记。假设您想要使用＆＃34;选择＆＃34;在所有元素上使用蓝色。类。
.selected {
color: #a7d2ff;
}
<!DOCTYPE html>
<html>
<script>
$("menu li a").each(function(){
if ($(this).attr("href") == window.location.pathname){
$(this).addClass("selected");
}
});
</script>
<body>
<!--site navigation / toolbar-->
<nav class="menu">
<ul>
<li id="home"><a href="index.html">Home</a></li>
<li id="about"><a href="about.html">About</a></li>
<li id="media"><a href="media.html">Media</a></li>
<li id="calendar"><a href="calendar.html">Calendar</a></li>
<li id="projects">
<a href="projects.html">Projects</a>
<ul class="sub-menu">
<li><a href="Bushcraft.html">Bushcraft</a></li>
<li><a href="Spicerack.html">SpiceRack</a></li>
<li><a href="LowTones.html">Low Tones</a></li>
<li><a href="JohnMclaughlin.html">Being John Mclaughlin</a></li>
</ul>
</li>
<li id="contact"><a href="contact.html">Contact</a></li>
</ul>
</nav>
请注意，对于＆＃34;项目＆＃34;中的项目，您的网站会出现这种情况。因为他们的网址不会告诉你他们在哪个部分（即＆＃34; tristangianola.com/Bushcraft.html"而不是＆＃34; tristangianola.com/projects/Bushcraft html的＆＃34）。要解决此问题，只需将项目页面放在项目目录中即可。但是，一旦你这样做，上面的代码仍然不会匹配，因为它不会严格==到＆＃34; projects / someProject.html＆＃34;。为此，您需要使用正则表达式（使用Javascript＆＃39; s .match实现）：
<script>
$("menu li a").each(function(){
if (location.pathname.match($(this).attr.href)){
$(this).addClass("selected");
}
});
</script>