Javascript 单击时未加载到Div的内容（w.jQuery）

我整个上午都在关注这个问题，我就是看不出我的问题在哪里。我看过大多数其他“点击后将内容加载到div”帖子，所有jQuery脚本/divid似乎都与我的相同

基本上，我的页面上有一张卡片，上面有两个链接作为标题，“内容a”和“内容B”。我希望

卡片主体

随着有人在内容a和内容B之间单击而动态变化

我正在用Django制作这个网站，如果这有什么不同的话

这张卡是Bootstrap的

这是我的代码：

<div class="card text-center" style="width: 800px;">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link" href="#actionA" style="color:#1DA1F2" id="actionA">Show Content A</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#actionB" style="color:#1DA1F2" id="actionB">Show Content B</a>
      </li>
    </ul>
  </div>
  <div class="card-body" id="tweetcontent">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $("#actionA").on("click", function(){
        $("#tweetcontent").load("top10pos.html");
      });
    </script>
  </div>
</div>

$（“#action a”）。在（“单击”，函数（）{
$（“#tweetcontent”）.load（“top10pos.html”）；
});

top10pos.html中包含的所有内容都是

内容A

（测试），并且它与具有上述卡片代码的html文件位于同一目录中

---

我做错了什么？一切似乎都在遵循大多数其他帖子所说的解决方案。任何帮助都将不胜感激。谢谢。

我想执行此

.load（）

时，DOM可能没有完全加载

尝试如下方式包装代码：

$(document).ready(function(){ });

---

让我知道你的结果-我会继续考虑其他可能性。

我猜这是个错误！js将在第一次单击时自动替换

<div class="card-body" id="tweetcontent">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $("#actionA").on("click", function(){
        $("#tweetcontent").load("top10pos.html");
      });
    </script>
</div>

正文{
背景：#ffffff；
填充：20px；
字体系列：Helvetica；
}
.卡体{
背景：ddd；
填充：10px；
}

这里的任何东西都将被替换

您在浏览器控制台中看到任何错误吗？请检查浏览器开发工具网络中的实际请求，确保请求成功（状态200），并返回您期望的结果，看起来我遇到了Django错误。在我的计算机上，我当前的URL为：，请求URL为。我猜这是一个URL错误，而不是jQuery错误，感谢您指出浏览器开发工具！我以为.load（）正在打开特定目录中的html文件。为什么它涉及request.URL？您是否尝试过将代码包装到$（document.ready（function（）{}）中；包装器。。。可能这就是问题所在，dom仍然没有加载，事件也没有被附加。另外-您是否进行了调试以查看是否有任何东西破坏了代码？您的包装器已经修复了它！另一个问题是URL，因为Django没有将“top10pos.html”识别为任何内容，所以实际上没有任何内容加载到div中。谢谢！很乐意帮忙。快乐编码！您知道如何使用jQuery函数加载HTML片段吗？我基本上只想在

中加载。您可以使用“$”（“#destinationElement”）.load（“path/to/file.html”）；”加载html代码段。谢谢！如何只加载HTML代码片段而不是网页？

load（）

在这里起作用，但如果您只想获取页面的一部分，则在django视图的后端执行

request.get

，您可以使用beautifulsoup对其进行解析，并将所需的HTML文本发送到模板中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card text-center" style="width: 800px;">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link" href="#actionA" style="color:#1DA1F2" id="actionA">Show Content A</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#actionB" style="color:#1DA1F2" id="actionB">Show Content B</a>
      </li>
    </ul>
  </div>
  <div class="card-body" id="tweetcontent">
    <p>Anything Here will be replaced</p>
  </div>
</div>

<script>
   $("#actionA").on("click", function(){
    $("#tweetcontent").load("https://enable-cors.org/");
  });

  $("#actionB").on("click", function(){
    $("#tweetcontent").load("https://www.html5rocks.com/en/tutorials/cors/");
  });
</script>