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代码。然而，不同之处在于第一页上的颜色或者＃1;＆＃34;应该与酒吧上的其他链接不同，在第二页上应该是＆＃34; Page 2＆＃34;应该是一个不同的颜色，等等。我怎么能用上面的代码实现这个？

我试过了：

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

但那并没有奏效。有什么建议吗？

Answer 1

添加HTML后，您需要在回调中选择元素。

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

根据您提供的代码，您可能尝试在元素存在之前选择该元素。 .load()方法是异步的，因此应该在回调中添加逻辑，以便在事件完成时触发它。另外，您还需要访问color对象上的style媒体资源（即element.style.color而不是element.color）。

Answer 2

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

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

设置从jQuery＆＃39; .load（）＆＃39;加载的链接的颜色。方法

2 个答案: