如何使用链接打开引导程序选项卡？

Question

我有以下引导程序选项卡代码，当我单击该选项卡时该代码正在工作，但是当我单击使用ul > li > a创建的链接时，我想打开该选项卡

但不幸的是它不起作用。 我怎样才能做到这一点？

html代码：

<ul>
    <li><a href="index.htm#tab1">tab1</a></li>
    <li><a href="index.htm#tab2">tab2</a></li>
</ul>

<div class="container">
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <p>I'm in Section 1.</p>
            </div>
            <div class="tab-pane" id="tab2">
                <p>I'm in Section 2.</p>
            </div>
        </div>
    </div>
</div>

JS代码：

<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>

Answer 1

给你的<ul>一个类名，比如alt-nav-tabs ，然后复制现有的导航 JS 代码。 它看起来像这样：

HTML：

<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
    <li><a href="index.htm#tab1">tab1</a></li>
    <li><a href="index.htm#tab2">tab2</a></li>
</ul>

<div class="container">
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <p>I'm in Section 1.</p>
            </div>
            <div class="tab-pane" id="tab2">
                <p>I'm in Section 2.</p>
            </div>
        </div>
    </div>
</div>

JS：

<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>

持久标签可见性：

根据以下评论，无论哪个选项卡处于活动状态，您都会显示一个选项卡...

一个我给的链接我看到在随机选项卡上自动添加了一个名为 tab-visible 的类。

要解决此问题，您可以使用以下代码在 HTML 加载后删除此类：

<script>

$(document).ready(function() {
  $('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});

</script>

将此脚本放在<head>部分，您应该可以开始使用了！

或者...

我注意到你试图覆盖原来的tab-visible行为。 就像现在一样，具有tab-visible类的tab-visible将永远不可见，即使该选项卡被单击并处于活动状态。 如果您从不打算在tab-visible上使用tab-visible类，您可以在此处从原始 CSS 文档中删除该样式：

http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8

在您的托管文件中找到该 CSS 文件，搜索.tab-visible ，然后简单地删除该类。

如何使用链接打开引导程序选项卡？

问题描述

1 个解决方案

解决方案1
1 2018-11-14 16:51:14

如何使用链接打开引导程序选项卡？

问题描述

1 个解决方案

解决方案1 1 2018-11-14 16:51:14

解决方案1
1 2018-11-14 16:51:14