Javascript / jQuery onclick无法正常工作

一尘不染

Javascript / jQuery onclick无法正常工作

css

我做了一个test.html文档来测试脚本。不知何故它不起作用，我不明白为什么什么也没发生。该脚本位于-tags中，并带有-tag，而css也具有-
tags。为什么不起作用？这是代码

<!DOCTYPE html>
<html>

    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script>
        $('#menu li a').on('click', function() {
            $('li a.current').removeClass('current');
            $(this).addClass('current');
        });
        </script>
        <style>
        .current {
            text-decoration: underline;
        }

        ul {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }
        </style>
    </head>

    <body>
        <div id="menu">
            <ul>
                <li><a id="about-link" class="current" href="#">ABOUT</a></li>
                <li><a id="events-link" href="#">EVENTS</a></li>
                <li><a id="reviews-link" href="#">REVIEWS</a></li>
                <li><a id="contact-link" href="#">CONTACT</a></li>
            </ul>
        </div>
    </body>

</html>

阅读 171

2020-05-16

共1个答案

一尘不染

由于用于绑定事件处理程序的代码是在元素存在于中之前执行的DOM，因此事件未绑定到元素上。

要解决此问题，您可以

将您的代码包装在ready()回调中，以便DOM在加载完成后执行您的代码
将您的脚本移动到的末尾<body>，以便所有元素都存在于其中DOM，您可以在其上绑定事件

码：

$(document).ready(function () {
    $('#menu li a').on('click', function () {
        $('li a.current').removeClass('current');
        $(this).addClass('current');
    });
});

编辑

您还可以使用load（ 不推荐使用 ）事件回调来绑定事件，但这将等待所有资源完全加载。

如果您想使用Vanilla
Javascript，可以DOMContentLoaded在上使用event document。

2020-05-16