css - 如何使用 Bootstrap 4/bootstrap-native-v4 刷新选项卡内容

Question

我想在 Angular 2 应用程序中使用带有 bootstrap-native-v4 的 Bootstrap 4 来显示选项卡。 (我通过 angular.json 文件“脚本”值“./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js”包含了 bootstrap-native-v4 - 注意我可以看到 bootstrap-native-v4通过 Chrome 开发者工具查看时包含在源 [scripts.js 文件] 中)

我正在使用 localhost:4200/myfolder 在本地运行我的应用程序，但是对于下面的代码，当我悬停/单击选项卡时，URL 默认为 localhost:4200/#home(而不是 localhost:4200/myfolder#家)、localhost:4200/#profile(而不是 localhost:4200/myfolder#profile)等。

那么发生的事情是页面回发到一个不存在的 URL

我已经尝试在头部设置 BaseURL，但是尽管这修复了 URL 问题，但当我单击选项卡时页面不会刷新内容。我还尝试将每个 anchor 的 href 设置为 myfolder#home、myfolder#profile 等，但是尽管这再次修复了 URL 问题(无回发)，但选项卡内容不会刷新

我真的想避免使用 JQuery(因此使用 bootstrap-native-v4)——大多数/所有示例似乎都使用 JQuery——我试图通过数据 API(bootstrap-native-v4 中的 JS)范围还可以)

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist" data-tabs="tabs">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">a...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">b...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">c...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">d...</div>
</div>

我希望代码不回发到服务器，并且只是在显示相应选项卡内容的选项卡之间切换

有人能帮忙吗？

Answer 1

BSN 开发者在这里。我想说的是:我不是 Angular 专家，但我可以告诉我我的库远离传统的 jQuery 方法、事件和插件结构，你需要首先考虑原生 JavaScript。

假设您正在处理完全动态的内容，其中的内容稍后会添加到 DOM 中/从 DOM 中删除，您可以尝试按照文档进行操作:

• init 使用 var myTab[N] = new Tab(element,options); 每个新添加的标签(myTab[N]/myTab1 是初始化 < em>反对一起工作)
通过方法 EG myTab[N].show(); 与您的 对象
• 交互
• 通过 myTab[N] = null; 处理对象，然后从 DOM 中移除其各自的 tab+tabContent
• Tab 组件(以及库中的所有其他组件)不处理 #myTab URL 导航

检查 documentation和 wiki有关详细信息，您可能会找到一些指南，希望对您有所帮助。