Question

以下是我的标签的初始状态：

Get-CFNStackResourceList -StackName 'teststack' -LogicalResourceId 'EC2Instance' -region 'eu-west-1'

到目前为止，我想出了如何从所有li标签中删除活动类：

<ul class="nav nav-tabs" id="myTabTabs">
<li class="active"><a href="#details" data-toggle="tab">Details</a></li>
<li class=""><a href="#publishing" data-toggle="tab">Publishing</a></li>
<li class=""><a href="#process-1" data-toggle="tab">Process: 1</a></li>
<li class=""><a href="#process-2" data-toggle="tab">Process: 2</a></li>
</ul>

但我无法想象如何在之后显示特定的标签。我尝试了以下方法：

(function($) {

  $(window).load(function() {

    $('a[data-toggle="tab"]').on('shown.bs.tab', function(event) {
       $(this).closest('.nav').find('.active').removeClass('active');
     }); 
  });

})(jQuery);

但它不起作用。

有人可以帮我这个吗？

由于

Answer 1

好的，所以我让你成为一个解释我所做的事情的jsfiddle，但是jsfiddle不会向你显示重新加载 - 你必须将代码复制到文件中。

https://jsfiddle.net/aq9Laaew/18024/

由于bootstrap可以防止href在点击时设置你的哈希值，你必须自己添加它。然后，当您加载页面并在右侧选项卡上“单击”时，您需要做的就是再次获取它。

HTML：

#!/usr/bin/perl

use strict;
use warnings 'all';

use Student;

my $student =  Student->new('John', 'Smith', 1987);

JS：

<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" aria-controls="nav-home">Home</a>
        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" aria-controls="nav-profile">Profile</a>
        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" aria-controls="nav-contact">Contact</a>
    </div>
</nav>
<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">home</div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">profile</div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">contact</div>
</div>

参考：https://getbootstrap.com/docs/4.0/components/navs/

在页面重新加载后显示特定选项卡

1 个答案: