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.
Below is the nav bar code in its own individual file:
<!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?
Aucun commentaire:
Enregistrer un commentaire