Question

提前道歉。我是Javascript的新手。我会尽量保持清醒。

我有一个带有外部html文件的网站，用于导航菜单，加载了javascript以便于编辑（因此我不必在每个页面上更改导航元素）。要插入导航菜单，我使用了以下脚本：

<script>
$(function(){
$("#nav").load("nav.html");
});
</script>

此脚本加上下面的div，可以毫无问题地加载nav.html。

<div id="nav"></div>

接下来，我想为当前链接（换句话说，与当前页面关联的链接）提供一种独特的样式。在搜索高低之后，我找到的最佳解决方案是以下脚本：

<script>
$(document).ready(function(){
var str=location.href.toLowerCase();
$("a").each(function() {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$("a").removeClass("current");
$(this).addClass("current");
}
});
})
</script>

但是，它仅在链接写入主html文件时才有效，而不是从外部html文件加载时。以下是外部nav.html文件的一部分：

<a class="nav-link" href="projects/senseofspace" target="_top">Sense of Space</a>
<a class="nav-link" href="projects/gsac" target="_top">GSAC Accessibility</a>
<a class="nav-link" href="projects/jonahecologycenter" target="_top">Jonah Ecology Center</a>

如您所见，链接已使用css文件中的以下设置进行样式设置：

a.nav-link:link {display:block; padding-left:5px; text-decoration:none; color:rgb(210,210,210);}
a.nav-link:visited {display:block; padding-left:5px; text-decoration:none; color:rgb(210,210,210);}
a.nav-link:active {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.nav-link:hover {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.nav-link {position:relative; display:block; left:10px; line-height:150%;}

我希望使用以下内容重新设置“当前”链接：

a.current:link {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.current:visited {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.current:active {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.current:hover {display:block; padding-left:5px; text-decoration:none; color:black; background-color:white;}
a.current {position:relative; display:block; left:10px; line-height:150%;}

主要的html文件都有写入标题的脚本，包括jQuery.js 1.11.0的链接。外部html导航文件没有。

如果您需要进一步说明，请与我们联系。谢谢！

Answer 1

将新的HTML元素添加到dom后，您需要调用这些.each()，.addClass()等。

试试这个：

$( "#nav" ).load( "nav.html", function() {
    var str=location.href.toLowerCase();
    $("a").each(function() {
        if (str.indexOf(this.href.toLowerCase()) > -1) {
            $("a").removeClass("current");
            $(this).addClass("current");
        }
    });
});

使用javascript设置驻留在外部html文件中的当前链接的样式

1 个答案: