Question

出于某种原因，我现在正在运行的代码无效。我的左侧有一个菜单，应该是当有人点击它时它会在该菜单上保持活动状态。但它不起作用。

<head>
    <link rel="stylesheet" href="Style/style.css" type="text/css"/>
<script type="text/javascript" src="http://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js"></script>
<script>
(function () {
    $('ul.menu li').click(function () {
        $('ul.menu li').removeClass('active');
        return $(this).addClass('active');
    });
}.call(this));
</script>

</head>
<body>
......
    <ul class="menu">
      <li><i class="fa fa-home"></i>Dashboard</li>
      <li><i class="fa fa-envelope"></i>Messages</li>
      <li><i class="fa fa-user"></i>Profile</li>
      <li class="active"><i class="fa fa-group"></i>Friends</li>
      <li><i class="fa fa-cog"></i>Settings</li>
    </ul>
  </nav>
.....

有人知道为什么会这样吗？谢谢

Answer 1

当你的click元素不在DOM中时，你试图将li事件处理程序附加到你的元素中 - 你的html标记会在以后出现。

将您的脚本移至关闭</body>标记之前。我也会把它简化为：

$('ul.menu li').click(function () {
    $('ul.menu li').removeClass('active');
    $(this).addClass('active');
});

顺便说一下 - 你在页面的任何地方都包含jQuery lib吗？如果没有，脚本也不会起作用。在页面的head部分的某处包含jQuery lib：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>

Answer 2

您可以通过以下方式将.call(this) $(document)功能包裹起来，而不是使用ready：

$(function () {
    $('ul.menu li').click(function () {
        $('ul.menu li').removeClass('active');
        $(this).addClass('active');
    });
});

删除return语句。此外，我无法找到添加到页面的jQuery。请添加如下jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

使用RawGit的网址替换基于GitHub的网址后，您的最终代码应如下所示：

<head>
  <link rel="stylesheet" href="Style/style.css" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdn.rawgit.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
  <script>
    $(function () {
      $('ul.menu li').click(function () {
        $('ul.menu li').removeClass('active');
        $(this).addClass('active');
      });
    });
  </script>

</head>
<body>
  ......
  <ul class="menu">
    <li><i class="fa fa-home"></i>Dashboard</li>
    <li><i class="fa fa-envelope"></i>Messages</li>
    <li><i class="fa fa-user"></i>Profile</li>
    <li class="active"><i class="fa fa-group"></i>Friends</li>
    <li><i class="fa fa-cog"></i>Settings</li>
  </ul>
  </nav>
.....

Answer 3

看起来页面拒绝从github url执行脚本。我在本地运行您的代码，并且在浏览器使用您提供的URL时遇到问题。你可以使用谷歌的CDN，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

或者看起来有另一个关于让github repos工作的stackoverflow帖子，Link and execute external JavaScript file hosted on GitHub

古德勒克

Jquery脚本无法正常工作

3 个答案: