Question

我在我的网站上使用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.do时使用id="test_1"在div中加载远程文件data-target="#test_1"的内容。但它没有用。我所知道的是，如果我使用数据目标，我们不需要编写任何jQuery / JavaScript来在标签中加载数据，因为数据目标会为我们做到这一点（如果我正确的话，请更正我错了。我的Bootstrap版本是v3.3.6。

请纠正我错在哪里。谢谢

Answer 1

无法使用数据属性将另一个网址中的数据load自动load()到标签内容中。当show tab事件触发时，您需要触发jQuery $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { ... $(target).load(url,function(result){ ... }); });方法...

{{1}}

实施例： http://codeply.com/go/xZfTnAtKUM

Answer 2

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加载

加载选项卡内容

<强> JAVASCRIPT：

<script>
$(document).ready(function () {
    $('#test_1').load('showTab1.do');
    $('#test_2').load('showTab2.do');
    $('#test_3').load('showTab3.do');
});
</script>

Answer 3

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

<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（）方法将数据加载到选项卡窗格中，如下所述。

选项卡上的Bootstrap 3数据目标属性不起作用

3 个答案: