Bootstrap 在引导卡中获取新选项卡项时重新加载页面

pbossiut  于 2023-05-21  发布在  Bootstrap
关注(0)|答案(1)|浏览(230)

我有这样一段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 上点击的选项卡?

envsm3lx

envsm3lx1#

使用html data-*标签解决了这个问题。

<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="#description" data-link="http://localhost/centosapp/info/configure#description"  role="link" aria-controls="description" aria-selected="true">Devices</a>
            </li>
            <li class="nav-item">
              <a class="nav-link"  href="#history" data-link="http://localhost/centosapp/info/configure#history"  role="link" aria-controls="history" aria-selected="false">Add Asset</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#deals" data-link="http://localhost/centosapp/info/configure#deals" role="link" aria-controls="deals" aria-selected="false">My Assets</a>
            </li>
          </ul>
        </div>

关于JS

$('#bologna-list a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show');
  var links = $(this).attr("data-link");
  window.location.href = links;
});

工作,但内部引导的解决方案会更好地工作。

相关问题