如何因为网址中的主题标签而停用另一个活动标签？

Posted 2021-05-06

我有一个已经激活的选项卡，但是如果主题标签指向另一个选项卡，我想停用另一个选项卡。

这是我的代码：

html：

<ul class="nav">
    <li class="active">
        <a class="default-tab" href="#default-tab">About</a>
    </li>


    <li>
        <a class="brand-tab" href="#brand-tab">Brand</a>
    </li>
</ul>


<div class="tab-content">
    <div class="default-tab active" id="default-tab">
        <p>...</p>
    </div>

    <div class="brand-tab" id="boc-brand">
        <p>...</p>
    </div>
</div>

JS：

$(document).ready(function() {
    if (location.hash === "#brand", function() {
            $(".brand-tab").addClass('active', function() {
                $(".default-tab").removeClass('active');
            });
        });
});

答案

你在他们不属于的地方有回调。这是您需要的代码：

$(document).ready(function() {
    if (location.hash === "#brand") {
        $(".brand-tab").addClass('active');
        $(".default-tab").removeClass('active');
    }
});

编辑：

如果这些是标记的Bootstrap选项卡，那么最好使用内置的Bootstrap方法：

$(document).ready(function() {
    if (location.hash === "#brand") {
        $('a[href="#brand-tab"]').tab('show');
    }
});