设置从 jQuery '.load()' 方法加载的 link 的颜色

Question

在我的 index.html 文件中，我有以下代码：

<div id="navbar"></div>

<script type="text/javascript">
    $(document).ready(function() {
        $('head').append('<link rel="stylesheet" type="text/css" href="stylesheets/navigation.css">');
        $("#navbar").load("scripts/navigationbar.html");
    });
</script>

并且 navigationbar.html 文件是：

<nav>
    <div>
        <ul>
            <li><a id="nav-page-1" href="page1.html">Page 1</a></li>
            <li><a id="nav-page-2" href="page2.html">Page 2</a></li>
        </ul>
    </div>
</nav>

标记和样式表正确加载和显示，但我想做的是在每个页面中复制并粘贴 jQuery 代码。但是，区别在于第一页上的颜色或 "Page 1" 应该与栏上的其他链接不同，而在第二页上 "Page 2" 的颜色应该是不同的颜色，等等。如何我可以用上面的代码实现吗？

我试过：

document.getElementById("nav-page-1").color = "#ff0000";

但这没有用。有什么建议吗？

Answer 1

添加 HTML 后，您需要 select 回调中的元素。

$("#navbar").load("scripts/navigationbar.html", function () {
  document.getElementById("nav-page-1").style.color = "#ff0000";
});

根据您提供的代码，您可能试图 select 该元素存在之前。 .load() 方法是异步的，因此应该在回调中添加逻辑，以便在事件完成时触发它。作为旁注，您还需要访问 style 对象上的 color 属性（即 element.style.color 而不是 element.color）。

Answer 2

DOMElement 没有颜色属性，您通过设置样式的颜色来设置颜色属性。

document.getElementById("nav-page-1").style.color = "#ff0000";

设置从 jQuery '.load()' 方法加载的 link 的颜色

Set the color of a link that is loaded from the jQuery '.load()' method

html

javascript

jquery

getelementbyid