首页 > 解决方案 > 如何在脚本中调用脚本

问题描述

我目前正在处理这个响应式画廊内容,它正在按照我想要的方式工作。但是,我需要在单击某个选择时让其中一个内容发生内容更改这是内容更改的工作代码。在检查它在单独的文件上运行正常后,我将它添加到主要的响应式画廊内容中。

是因为我放置了内容更改脚本吗?我尝试将它放在下面的主脚本中,但它不起作用。我尝试创建自己的脚本标签并将其放在最后,但结果相同。现在,我尝试将它添加到 head 标签中,但它仍然无法正常工作。谁能帮帮我T^T

请单击 atkinsons 菜单,因为这是我插入内容更改的地方

这是我指的是谁负责选择适当的页面来更改内容的脚本标签。

<!--Content Change Script-->
  <script type="text/javascript">
    $(document).ready(function() {
      $("a").click(function() {
        var id = $(this).attr("data-id"); // Using a custom attribute.
        $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
        $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
      });
    });
  </script>

问题在阿特金森页面下,每当我单击选择时,内容都不会改变。在第一个链接下,结果应该是这样的。每当我点击选择时,标题和页面都应该改变。

更改我已经应用了下面第一个答案中的代码建议。它现在在单击选择时更改标题,但并非所有部分都是可单击的。我在 codepen 和 localhost 中应用了相同的更改,但它产生了不同的可点击链接,这些链接不起作用。随机字母不起作用取决于窗口的大小。该段落也没有显示

标签: javascripthtmlcss

解决方案


Your script is not working because your <a> is not in page when you are trying to bind events to them.

You need to do delegate which is something like this.

<script type="text/javascript">
    $(document).ready(function() {
      $(document).on("click", "a", function() {
        var id = $(this).attr("data-id"); // Using a custom attribute.
        $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
        $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
      });
    });
  </script>

This will bind event to document, which is in page from start.

More on jQuery api here.


推荐阅读