Jquery 如何从ng include更改HTML中的标记_Jquery_Html_Angularjs_Web

Jquery 如何从ng include更改HTML中的标记

jquery html angularjs web

Jquery 如何从ng include更改HTML中的标记,jquery,html,angularjs,web,Jquery,Html,Angularjs,Web,因此，我对网络编程相当陌生，我正试图找到一种有效的、有组织的、最小化的方法来构建一个网站。我几乎对整个网站进行了编码（tristangianola.com），但现在我在每个html文件中明确地手工编写了导航栏的代码。但现在我正试图将导航栏放在一个html文件中，并使用Ajax的“ng include”将其导入到每个网页中。我的问题是…如何更改ng包含文件中的特定标记，以便…根据打开的网页，该链接将点亮不同的颜色以下是单独文件中的导航条形码： <!DOCTYPE html> <

因此，我对网络编程相当陌生，我正试图找到一种有效的、有组织的、最小化的方法来构建一个网站。我几乎对整个网站进行了编码（tristangianola.com），但现在我在每个html文件中明确地手工编写了导航栏的代码。但现在我正试图将导航栏放在一个html文件中，并使用Ajax的“ng include”将其导入到每个网页中。我的问题是…如何更改ng包含文件中的特定标记，以便…根据打开的网页，该链接将点亮不同的颜色

以下是单独文件中的导航条形码：

<!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仍然是这样做的好方法吗

这是一个非常常见的问题，有很多选择，但我的建议是做类似的事情。您可以只添加一个类，而不是替换标记。假设您希望“selected”类的所有元素上都显示蓝色

您的CSS：

您的导航：

.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>

<script>
$("menu li a").each(function(){
           if (location.pathname.match($(this).attr.href)){
                   $(this).addClass("selected");
           }
   });
</script>