Question

我在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>

我希望能够重新加载页面，以便在单击选项卡时从服务器获取新内容。如何重新加载并显示在引导程序上单击的选项卡？

Answer 1

使用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;
});

有效，但是引导程序内的解决方案会更好。

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

1 个答案: