javascript - 动态加载文件到 html 选项卡内容

Question

我正在尝试从不同的 html 页面动态加载选项卡内容。当我单击 EROs 选项卡时，它应该显示/SVB/Tax_Eros.html 文件中的内容，而无需重新加载页面。同样，当单击“导入”选项卡时，它应该显示来自/SVB/Tax_Imports 的内容

<ul class="nav nav-tabs">
    <li class="active" >
        <a href="/SVB/Tax_Eros" id="eros">EROs</a>
    </li>
    <li>
        <a href="/SVB/Tax_Imports" id="imports">Imports</a>
    </li>
    <li>
        <a href="/SVB/Tax_Accounting" id="accounting">Accounting</a>
    </li>
</ul>

<div class="tab-content clear-fix">
        <div class="tab-pane active" id="eros">
            <script>
                $('#eros').click(function(){
                    $('#Taxeros').load($(this).attr('href'));
                });
            </script>
        </div>
        <div class="tab-pane" id="imports">
            <script>
                 $('#imports').click(function(){
                    $('#Taximports').load($(this).attr('href'));
                 });
            </script>
        </div>
        <div class="tab-pane" id="accounting">
            <script>
                $('#accounting').click(function(){
                    $('#Taxaccounting').load($(this).attr('href'));
                });
            </script>
        </div>
</div>

Answer 1

由于您使用的是 Bootstrap Tabs (3.3.7)，因此您需要修改标记，因为 Bootstrap 需要某些约定才能在不配置一堆 JS 的情况下发挥其魔力。

我们没有将需要加载的页面放在 href 属性中，而是将其放在自定义 data-src 属性中。 Bootstrap 期望 href 属性的值是与选项卡关联的选项卡 Pane 的 ID。我们还添加了 data-toggle="tab"，因为这是 Bootstrap 选项卡运行所必需的。

看起来您正在尝试在选项卡单击时加载内容，但这对默认选项卡和它的选项卡 Pane 没有用，因为它最初不会有任何内容。所以我们已经将一个函数传递给 jQuery，它将在 DOM 准备就绪时执行。此函数将解析选项卡并根据属性值将内容加载到选项卡 Pane 中。

$(function() {

  $('.nav-tabs a').each(function(index, el) {

    var $this = $(this);
    var pane = $this.attr('href');
    var src = $this.data('src');

    $(pane).load(src);

  });

});

<ul class="nav nav-tabs">
  <li class="active">
    <a data-src="/SVB/Tax_Eros" href="#eros" data-toggle="tab">EROs</a>
  </li>
  <li>
    <a data-src="/SVB/Tax_Imports" href="#imports" data-toggle="tab">Imports</a>
  </li>
  <li>
    <a data-src="/SVB/Tax_Accounting" href="#accounting" data-toggle="tab">Accounting</a>
  </li>
</ul>

<div class="tab-content clear-fix">
  <div class="tab-pane active" id="eros">1</div>
  <div class="tab-pane" id="imports">2</div>
  <div class="tab-pane" id="accounting">3</div>
</div>

据我所知，Stack Snippets 无法模拟 Ajax 请求，因此这里是 JSFiddle和一个 Plunker这样做。