So I'm fairly new to web programming and am trying to figure out an effective, organized, and minimal way to put together a website. I pretty much have the whole website coded (tristangianola.com) but right now I hand wrote the code for the navigation bar explicitly in each html file. But now I'm trying to put the nav bar in one html file and import it into each web page using Ajax's "ng-include". My question is...how can I alter specific tags in the ng-included file so that...based on what web page is open, that link will light up a different color.
因此，我对网络编程相当陌生，我正试图找出一个有效、有组织、最少的方法来建立一个网站。我已经对整个网站进行了编码(tristangianola.com)，但是现在我在每个html文件中显式地为导航条编写代码。但是现在我正在尝试将导航条放在一个html文件中，并使用Ajax的“ng-include”将其导入到每个web页面。我的问题是……如何修改包含ng的文件中的特定标记，以便……基于什么网页是开放的，这个链接将点亮一个不同的颜色。
Below is the nav bar code in its own individual file:
以下是个别文件内的nav条码:
<!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>
And what I would like to do is in individual webpages such as media.html, I want to get the li attribute by the ID and replace the tag with a tag so that the css will change the link to blue. Is ng-include still a good way to go about doing this?
我想做的是在个人网页上，比如媒体。html，我想通过ID获取li属性，然后用标签替换标签，这样css就会把链接改成蓝色。ng-include仍然是一个很好的方法吗?
1 个解决方案
#1
0
This is a pretty common problem and there are tons of options, but my recommendation would be to do something similar to Chris Coyer. Instead of replacing the tag, you can just add a class. Say you want that blue color to be on all elements with the "selected" class.
这是一个非常常见的问题，有很多选择，但我的建议是做一些类似克里斯·科尔的事情。您可以添加一个类，而不是替换标记。假设您希望蓝色显示在“selected”类的所有元素上。
Your CSS:
.selected {
color: #a7d2ff;
}
Your nav:
<!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>
Note that this will fail on your website for the items in the "Projects" section because they have URLs that don't tell you what section they're in (i.e. "tristangianola.com/Bushcraft.html" instead of "tristangianola.com/projects/Bushcraft.html"). To fix this just put the projects pages in the projects directory. Once you do this though, the above code still won't match because it won't be strictly == to "projects/someProject.html". For that, you'll need regular expressions (implemented with Javascript's .match):
请注意，这将在你的网站上失败的项目在“项目”部分，因为他们有url没有告诉你他们在什么部分(例如。"tristangianola.com/Bushcraft.html”而不是"tristangianola.com/projects/Bushcraft.html”)。要解决这个问题，只需将projects页面放在projects目录中。但是，一旦您这样做了，上面的代码仍然无法匹配，因为它不会被严格地==“projects/someProject.html”。为此，您将需要正则表达式(使用Javascript的.match实现):
<script>
$("menu li a").each(function(){
if (location.pathname.match($(this).attr.href)){
$(this).addClass("selected");
}
});
</script>
#1
0
This is a pretty common problem and there are tons of options, but my recommendation would be to do something similar to Chris Coyer. Instead of replacing the tag, you can just add a class. Say you want that blue color to be on all elements with the "selected" class.
这是一个非常常见的问题，有很多选择，但我的建议是做一些类似克里斯·科尔的事情。您可以添加一个类，而不是替换标记。假设您希望蓝色显示在“selected”类的所有元素上。
Your CSS:
.selected {
color: #a7d2ff;
}
Your nav:
<!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>
Note that this will fail on your website for the items in the "Projects" section because they have URLs that don't tell you what section they're in (i.e. "tristangianola.com/Bushcraft.html" instead of "tristangianola.com/projects/Bushcraft.html"). To fix this just put the projects pages in the projects directory. Once you do this though, the above code still won't match because it won't be strictly == to "projects/someProject.html". For that, you'll need regular expressions (implemented with Javascript's .match):
请注意，这将在你的网站上失败的项目在“项目”部分，因为他们有url没有告诉你他们在什么部分(例如。"tristangianola.com/Bushcraft.html”而不是"tristangianola.com/projects/Bushcraft.html”)。要解决这个问题，只需将projects页面放在projects目录中。但是，一旦您这样做了，上面的代码仍然无法匹配，因为它不会被严格地==“projects/someProject.html”。为此，您将需要正则表达式(使用Javascript的.match实现):
<script>
$("menu li a").each(function(){
if (location.pathname.match($(this).attr.href)){
$(this).addClass("selected");
}
});
</script>