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类，则可以从以下原始CSS文档中删除样式：

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

在托管文件中找到该CSS文件，搜索.tab-visible，然后只需删除该类。

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

1 个答案: