Question

我正在尝试更改导航栏中元素的颜色，以便在文档加载时显示所选页面的效果。但是，我编写的代码（JS的新代码）不起作用;没有颜色变化。请你告诉我我哪里出错了？

<script type="text/javascript">

        document.onLoad = (function() {
            var nav = document.getElementById('textContainer');

            var navItems = nav.getElementsByTagName('a');

            var activeItem = navItems[0];

            activeItem.style.color = "#696969";
        });

</script>

<div id="header">
    <a href="#">
    <div id="logo"></div>
    </a>
    <div id="navigation">
    <div id="textContainer">
        <h2><a href="#works">Works</a></h2>
        <h2><a href="#blog">Blog</a></h2>
        <h2><a href="#contact">Contact</a></h2>
    </div>
   </div>
</div>

Answer 1

将document.onLoad替换为window.onload。问题解决了。

JavaScript不是HTML。因此，它区分大小写。在HTML中，全局事件处理程序附加到<body>。在JavaScript中，必须在window上定义全局方法。

绑定事件侦听器的方法：

window.onload = function(){...};                         // Works universally
window.addEventListener("load", function(){...}, false); // @All decent browsers
window.attachEvent("onload", function(){...});           // IE-only

Answer 2

使用jquery：

$("#textContainer h2 a").first().css("color","green");

Answer 3

这是完全正常工作的代码

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function() {


        var nav = document.getElementById('textContainer');

        var navItems = nav.getElementsByTagName('a');

        var activeItem = navItems[0];

        activeItem.style.color = "#696969";
});
</script>

<div id="header">
<a href="#">
<div id="logo"></div>
</a>
<div id="navigation">
<div id="textContainer">
    <h2><a href="#works">Works</a></h2>
    <h2><a href="#blog">Blog</a></h2>
    <h2><a href="#contact">Contact</a></h2>
</div>
</div>
</div>

在文档加载时更改标记的颜色

3 个答案: