我想在 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#home), localhost:4200/#profile(而不是 localhost:4200/myfolder#profile)等。
所以会发生什么是页面发回一个不存在的 URL
我尝试在头部设置 BaseURL,但是虽然这解决了 URL 问题,但当我单击选项卡时页面不会刷新内容。我还尝试将每个锚点的 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>
我希望代码不回发到服务器,并简单地在显示相应选项卡内容的选项卡之间切换
任何人都可以帮忙吗?