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

Posted 2023-05-08

【中文标题】如何更改窗口加载功能上的引导活动选项卡

【英文标题】：How to change bootstrap active tab on window onload function

【发布时间】：2017-10-11 19:42:06

【问题描述】：

页面完全加载后，我想将活动选项卡更改为选项卡。我的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');
);

但这不起作用。我该怎么做？提前致谢。

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

【问题讨论】：

尝试：$('.nav-tabs ul a:first').tab('show');

对不起，不工作。

这可能会有所帮助：jsfiddle.net/xFW8t/12

您要突出显示哪个标签？

@MohitBhardwaj #tab1

【参考方案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>

编辑了答案 请现在检查它是否适合您。我认为您已经发布了我添加的代码，但不确定为什么它不适合您。请检查此解决方案一次。

【讨论】：

很抱歉，我无法让您理解问题所在。页面加载后，我希望 id="daily" 处于活动状态。

【参考方案2】：

感谢@MohitBhardwaj，但很抱歉没有奏效。最后我尝试了这个

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

这奏效了。嗯，我不知道这是否是正确的方式，但通过这个我实现了我想要的。

【参考方案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");