BootStrap：导航栏下方的页面刷新

Question

我有一个使用bootstrap水平构建的导航栏。当我选择菜单选项时，我只希望刷新导航栏下方的部分。所以，比方说我选择菜单1，我只想要在栏下面的部分刷新

问题 1.我怎样才能做到这一点？
2.如果我设计一个全新的页面并在那里使用导航栏，它是否会产生相同的效果。

Answer 1

您可以使用toggleable / Dynamic nav Tabs

来实现此目的

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

是的，如果您使用适当的ID，它在新创建的页面中也会产生相同的效果。

带有可切换标签的普通导航栏

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
      <li><a data-toggle="tab" href="#page1">Page 1</a></li>
      <li><a data-toggle="tab" href="#page2">Page 2</a></li>
      <li><a data-toggle="tab" href="#page2">Page 3</a></li>
    </ul>
  </div>
  </nav>
  <div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="page1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="page2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
   <div id="page3" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

Answer 2

您正在寻找的是Ajax。由于您使用的是bootstrap，因此您已经在使用jquery。 Jquery有ajax函数，可以使用服务器端javascripting加载外部内容。因此，您可以创建内容div，然后加载和删除此div中的数据。要了解ajax，您可以在Jquery ajax documentation查看相关文档。 SitePoint在这里有一个非常好的教程SitePoint jquery ajax tutorial。你也可以google这个，并找到许多关于如何设置ajax调用的其他教程。要测试代码，您显然需要使用服务器或本地程序，如xampp。

一种非常简单的方法是使用jquery load函数，这是一个简单的ajax调用，你可以在这里阅读Jquery Load。您可以使用jquery清空内容div，然后将下一页内容div加载到其中。

从您的问题中可以看出，似乎您可能正在寻找后退按钮的全部功能以及更改标题和事物的性质。这将需要使用html5 History Api来处理浏览器后退和前进按钮的更多脚本。然后，在浏览器选项卡中更改标题将需要更多脚本。此外，如果停用了javascript和旧版浏览器，您的网站可能无法按预期运行。

在这种情况下，您可能需要查看一个ajax库，它将处理浏览器后退按钮的使用，以及更改浏览器选项卡中的标题等等。这些库中也有很多，如果你对ajax的了解有限，你可能需要研究这些，因为它可能会让你的生活更轻松。这些库包括pjax，turbolinks和wiselinks。我个人非常喜欢wiselinks。它将为您提供完整的功能，例如您正在浏览普通页面，但会从其他页面提取内容并将其插入到页面上的内容div中，而不是重新加载页面。因此，您可以放置​​您的菜单，页脚和其他在整个网站中保持不变的内容，例如页面上的侧边栏，然后只需替换内容。它还可以提供极快的浏览体验，因为您不是只加载整个页面的内容。你可以在Wiselinks找到wiselinks。您可以非常轻松地开始使用它，只需将wiselinks javascript包含到您的项目中并在jquery之后链接到它。然后，您可以使用就绪函数启动它，并将内容容器说明如下：

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return teamOneArray.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomCell
    cell.TeamOneLabel?.text = teamOneArray[indexPath.row]
    cell.TeamTwoLabel?.text = teamTwoArray[indexPath.row]
    return cell
}

并编写链接，例如添加数据属性$( document ).ready(function() { window.wiselinks = new Wiselinks($('#your-content-container')); }); ：

data-replace="true"

无论如何，我希望这一切都有所帮助，我认为您可能需要阅读所有不同的方法来进行ajax调用，然后再决定要实现哪种方法。但似乎你没有发布任何代码，并想知道如何实现这一点，你可能想要选择一个ajax库。如果您在下面的评论部分有任何问题并祝您好运，请告诉我。