Question

我正在与Django合作建立一个简单的网站，在我的其中一个页面function Animator:init(args) if args.statictilesize ~= nil then self.isTileSizeStatic = args.statictilesize else self.isTileSizeStatic = true end end中，我调用了Twitter API来加载一些数据。

在analysis.html中，有一张我从Bootstrap组件中获得的卡片：

analysis.html

有两个按钮，<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="#buttona" style="color:#1DA1F2">Content A</a> </li> <li class="nav-item"> <a class="nav-link" href="#buttonb" style="color:#1DA1F2">Content B</a> </li> </ul> </div> <div class="card-body"> <h5 class="card-title">Content A</h5> <p class="card-text"> // Content A Stuff </p> </div> </div>和Content A，单击Content B后，我希望页面仅在卡内加载内容A的内容，对于{{1} }。

我对HTML还是很陌生，所以我的第一个想法就是在用户单击按钮A时加载一个新页面，例如Content A，在用户单击按钮B时加载一个content B，其中除了内容A / B，HTML模板上的内容都相同。

但这似乎是不好的编码，它会不必要地调用Twitter API，因为打开analysisA.html时已经调用了所有必需的数据。

那么，我应该如何仅在卡中来回交换内容，同时保持页面中的所有其他内容不变？谢谢。

Answer 1

通常，您将使用AngularJS之类的javascript框架来加载页面内容，但是由于引导程序使用jQuery，因此您可以利用基于jQuery的加载功能。例如：

$("#contentA").click(function() {
  //Load an entire external page in to contentA
  $( "#contentB" ).load( "analysisB.html div#content" );
  //Load just a piece of data from an external file in to contentA
  $( "#contentB" ).load( "analysisB.html" );
})

带有Navbar的引导卡-如何在不加载新页面的情况下加载新内容？

1 个答案: