Css 如何使用Bootstrap 4/Bootstrap-native-v4刷新选项卡内容
我想在Angular 2应用程序中使用Bootstrap 4和Bootstrap-native-v4来显示选项卡。(我通过angular.json文件“scripts”值包含bootstrap-native-v4)。/node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js”-注意,通过Chrome开发者工具查看时,我可以看到源[scripts.js文件]中包含bootstrap-native-v4) 我使用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可以)Css 如何使用Bootstrap 4/Bootstrap-native-v4刷新选项卡内容,css,angular,tabs,bootstrap-4,bootstrap-native,Css,Angular,Tabs,Bootstrap 4,Bootstrap Native,我想在Angular 2应用程序中使用Bootstrap 4和Bootstrap-native-v4来显示选项卡。(我通过angular.json文件“scripts”值包含bootstrap-native-v4)。/node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js”-注意,通过Chrome开发者工具查看时,我可以看到源[scripts.js文件]中包含bootstrap-native-v4) 我使用localhost:4
-
-
-
-
A.
B
C
D
我希望代码不要回发到服务器,而只是在显示相应选项卡内容的选项卡之间切换
有人能帮忙吗?这里是BSN开发者。我想说的是:我不是角度专家,但我可以告诉你,我的库已经脱离了传统的jQuery方法、事件和插件结构,你需要先考虑原生JavaScript 假设您使用的是完全动态的内容,内容稍后会添加/更改/删除到DOM中或从DOM中删除,您可以尝试按照以下文档使用它:
- init每个新添加的选项卡都具有
var myTab[N]=新选项卡(元素、选项)代码>(myTab[N]/myTab1是要使用的初始化对象)
- 通过方法与对象交互,例如
myTab[N].show()代码>
- 通过
myTab[N]=null处理对象代码>然后从DOM中删除其各自的tab+tabContent
- 选项卡组件(以及库中的所有其他组件)不处理
URL导航#myTab
<!-- 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>