我有这样一段JavaScript代码,它允许我访问一个带有hashbang的页面来访问一个标签
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
这是一个示例链接http://localhost/centosapp/info/configure#description
我显示一个标签上点击使用
$('#bologna-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
});
这是HTML
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="<?php echo base_url('info/configure'); ?>#description" role="link" aria-controls="description" aria-selected="true">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('info/configure'); ?>#history" role="link" aria-controls="history" aria-selected="false">Add Asset</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('info/configure'); ?>#deals" role="link" aria-controls="deals" aria-selected="false">My Assets</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content mt-3">
<div class="tab-pane active" id="description" role="tabpanel">
...items are shown here
</div>
</div>
我希望能够重新加载页面,以便从服务器上获取新的内容,当我点击一个选项卡。我如何重新加载并显示在 Bootstrap 上点击的选项卡?
1条答案
按热度按时间envsm3lx1#
使用html
data-*
标签解决了这个问题。关于JS
工作,但内部引导的解决方案会更好地工作。