如何在窗口加载功能上更改引导程序活动选项卡

Question

页面

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

<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

如果只是从第一个li中删除active类，则第二个选项卡会在页面加载后自动突出显示。如果我错过了什么，请告诉我。

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

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

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

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");
            }