Question

完全加载页面后，我想将活动选项卡更改为选项卡。我的HTML是：

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Video</a></li>
    <li><a data-toggle="tab" href="#tab2">Maps</a></li>
    <li><a data-toggle="tab" href="#tab3">Gallery</a></li>
</ul>
<div id="tab1" class="tab-pane fade">....</div>
<div id="tab2" class="tab-pane fade in active map">....</div>
<div id="tab3" class="tab-pane fade gallery">....</div>

我尝试的jquery是：

$(window).load(function() {
    $('.nav-tabs a[href="#tab1"]').tab('show');
});

但这并不奏效。我该怎么做？提前谢谢。

注意：我无法从第二个标签中删除活动课程，因为我的代码在页面加载时必须处于活动状态

Answer 1

如果您只是从第一个active中删除li类，则第二个标签会在页面加载后自动突出显示。如果我遗失了什么，请告诉我。

＆＃13;

$("a[data-toggle=tab][href=#daily]").tab("show");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="nav nav-tabs">
    <li><a data-toggle="tab" href="#daily">Daily</a></li>
    <li class="active"><a data-toggle="tab" href="#map">Maps</a></li>
    <li><a data-toggle="tab" href="#gallery">Gallery</a></li>
</ul>
<div id="daily" class="tab-pane fade">Daily Tab</div>
<div id="map" class="tab-pane fade in active map">Map Tab</div>
<div id="gallery" class="tab-pane fade gallery">Gallery Tab</div>




<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

＆＃13;

编辑了答案 请立即检查它是否适合您。我想你已经发布了我添加的代码，但不确定为什么它对你不起作用。请检查此解决方案一次。

Answer 2

谢谢@MohitBhardwaj，但很抱歉没有用。最后我试了这个

 $(window).load(function() {
        // $("a[data-toggle=tab][href=#daily]").tab("show");
        $(".tab-content #map").removeClass('active');
        $(".tab-content #daily").addClass('in active');
    });

这很有效。好吧，我不知道这是不是正确的方式，但通过这个我实现了我想要的。

Answer 3

试试这个..

 var hash = window.location.hash;
 var sTabHash = hash.split('#tab');
 var isTab = sTabHash[1] > 0 ? sTabHash[1] : 0;
            if(isTab > 0){
                $(".nav.nav-tabs li").removeClass("active");
                $(".tab-content div[class*=tab-pane]").removeClass("active");
                $(".nav.nav-tabs li a[href*=tab"+isTab+"]").parent().addClass("active");
                $("#tab"+isTab).addClass("active");
            }
            else{
                $(".nav.nav-tabs li a[href*=tab1]").parent().addClass("active");
                $("#tab1").addClass("active");
            }

如何更改窗口onload函数上的bootstrap活动选项卡

3 个答案: