Question

我正在使用Bootstrap Tabs并在Asp.net MVC5 Web应用程序中使用Jquery加载它们。但是在页面加载时没有加载选项卡1（30天）。我已多次重新检查代码，但无法找到问题。你能不能看看我做错了什么。感谢

HTML

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Hot Stories</h3>
                <span class="pull-right">
                    <!-- Tabs -->
                    <ul class="nav panel-tabs" id="HotStoriesTabs">
                        <li class="active"><a href="#30Day" data-toggle="tab" data-url="/HotStories30Days">30 days</a></li>
                        <li><a href="#14Day" data-toggle="tab" data-url="/HotStories14Days">14 days</a></li>
                        <li><a href="#7Day" data-toggle="tab" data-url="/HotStories7Days">7 days</a></li>
                    </ul>
                </span>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="30Day"><i class="fa fa-spinner fa-2x fa-pulse"></i></div>
                    <div class="tab-pane" id="14Day"><i class="fa fa-spinner fa-2x fa-pulse"></i></div>
                    <div class="tab-pane" id="7Day"><i class="fa fa-spinner fa-2x fa-pulse"></i></div>
                </div>
            </div>
        </div>

的Javascript

$(document).ready(function () {
    $('#HotStoriesTabs a').click(function (e) {
        e.preventDefault();
        var url = $(this).attr("data-url");
        var href = this.hash;
        var pane = $(this);
        $(href).load(url, function (result) {
            pane.tab('show');
        });
    });

    // tab to load on page load
    $('#30Day').load($('.active a').attr("data-url"), function (result) {
        $('.active a').tab('show');
    });
    });

Answer 1

由于它是30天内的第一个锚标记，您可以在注册点击事件后使用first()函数获取第一个标记，并使用click()或trigger('click')来点击它以编程方式：

 $('#HotStoriesTabs a').click(function (e) {
    e.preventDefault();
    var url = $(this).attr("data-url");
    var href = this.hash;
    var pane = $(this);
    $(href).load(url, function (result) {
        pane.tab('show');
    });
}).first().click();

Bootstrap Ajax选项卡未预加载

1 个答案: