2

我在我的网站中使用 Bootstrap 选项卡。当页面加载选项卡将在运行时使用动态内容填充数据。我为此使用data-target了锚标记上的属性，但它似乎根本不起作用。

这是我到目前为止所尝试的：

HTML

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="showTab1.do" data-target="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a>
            </li>
            <li role="presentation">
                <a href="showTab2.do" data-target="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a>
            </li>
            <li role="presentation">
                <a href="showTab3.do" data-target="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a>
            </li>   
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="test_1"></div>
            <div role="tabpanel" class="tab-pane active" id="test_2"></div>
            <div role="tabpanel" class="tab-pane active" id="test_3"></div> 
        </div>
    </div>
</div>

在这里，我试图在使用锚标记时加载showTab1.dodiv 内的远程文件的内容。但它不起作用。我所知道的是，如果我使用数据目标，我们不需要编写任何 jQuery/JavaScript 来在选项卡中加载数据，因为数据目标会为我们执行此操作（如果我错了，请纠正我）。我的 Bootstrap 版本是 v3.3.6。id="test_1"data-target="#test_1"

请纠正我哪里错了。谢谢

4

3 回答 3

1

无法load使用数据属性将来自另一个 url 的数据自动放入选项卡内容中。load()当 show tab 事件触发时，您需要触发 jQuery方法...

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  ...

  $(target).load(url,function(result){      
    ...
  });
});

示例： http ://codeply.com/go/xZfTnAtKUM

于 2016-02-06T14:23:35.227 回答
0

HTML：

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a>
            </li>
            <li role="presentation">
                <a href="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a>
            </li>
            <li role="presentation">
                <a href="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a>
            </li>   
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="test_1"></div>
            <div role="tabpanel" class="tab-pane" id="test_2"></div>
            <div role="tabpanel" class="tab-pane" id="test_3"></div> 
        </div>
    </div>
</div>

并使用 jQuery load 加载选项卡内容

JAVASCRIPT：

<script>
$(document).ready(function () {
    $('#test_1').load('showTab1.do');
    $('#test_2').load('showTab2.do');
    $('#test_3').load('showTab3.do');
});
</script>
于 2016-02-06T12:56:51.887 回答
0

有几个错误，但这有效。我将选项卡 1,2 和 3 添加到选项卡窗格中，这样您就可以在单击导航链接时看到结果（只需删除文本，以免弄乱您的流程）..

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#test_1" aria-controls="test_1" role="tab" data-toggle="tab">Tab 1</a></li>
            <li role="presentation"><a href="#test_2" aria-controls="test_2" role="tab" data-toggle="tab">Tab 2</a></li>
            <li role="presentation"><a href="#test_3" aria-controls="test_3" role="tab" data-toggle="tab">Tab 3</a></li>   
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="test_1">Tab 1</div>
            <div role="tabpanel" class="tab-pane fade" id="test_2">Tab 2</div>
            <div role="tabpanel" class="tab-pane fade" id="test_3">Tab 3</div> 
        </div>
    </div>
</div>

希望这会有所帮助 - 然后使用 .load() 方法将数据加载到选项卡窗格中，如下所述。

于 2016-02-06T12:59:08.987 回答