转到不同页面链接上的特定选项卡单击并切换活动类

Posted 2023-02-22

【中文标题】转到不同页面链接上的特定选项卡单击并切换活动类

【英文标题】：Go to Specific Tab on different Page link click and toggle active class

【发布时间】：2015-09-08 12:39:59

【问题描述】：

我正在开发一个使用 Twitter 的 Bootstrap 框架和他们的 Bootstrap Tabs JS 的网页。它工作得很好，但我试图在标签面板之外添加额外的链接来打开标签，点击ul --> li 链接下的标签链接效果很好。

但是当我点击 nav panel-tabs 之外的链接时，如何才能将选项卡面板开关和 active 类添加到 nav panel-tabs @987654327当单击nav panel 本身之外的链接时@ CSS 类元素（因为在我的情况下active 类显示不同的背景颜色）。

例如：

这些链接位于页面上方的面板代码之外：

<a href="page.php#gallery">Gallery</a>
<a href="page.php#movies">Movies</a>

我需要将标签类<ul class="nav panel-tabs"> --> <li> 的状态切换为活动状态，并在单击其他链接时将其删除。

这是带有导航标签的面板：

<div class="panel-heading">
    <div class="padpanel">Panel Heading</div>
    <div class="pull-left">
        <ul class="nav panel-tabs">
            <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
            <li><a href="#gallery" data-toggle="tab">Gallery</a></li>
            <li><a href="#movies" data-toggle="tab">Movies</a></li>
        </ul>
    </div>
</div>

<div class="panel-body">
    <div class="tab-content">
        <div class="tab-pane active" id="profile">Profile tab </div>
    </div>
</div>
<div class="panel-body">
    <div class="tab-content">
        <div class="tab-pane" id="gallery">Gallery tab </div>
    </div>
</div>
<div class="panel-body">
    <div class="tab-content">
        <div class="tab-pane" id="movies">Movies tab </div>
    </div>
</div>

【问题讨论】：

正在加载，$("a[href$='"+location.hash.slice(1)+"']").click()。那么您的部分选择应该在重新加载时保持不变，并且可以链接。

【参考方案1】：

您可以使用 jQuery 获取页面 url #hash 并选择 Bootstrap 选项卡...

var hash = document.location.hash;
if (hash) 
    $('.nav-tabs a[href='+hash+']').tab('show');
 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) 
    window.location.hash = e.target.hash;
);

代码：http://codeply.com/go/RypzN2UXKF

演示（选择选项卡 2）：http://codeply.com/render/RypzN2UXKF#tab2

【讨论】：

我不得不将代码更改为 $('.nav-tabs a[href="'+hash+'"]').tab('show');为了让它工作，在没有额外引号的情况下收到语法错误。

这帮助我完成了一个项目，但我已经像这样使用 vanilla JS：if (document.location.hash) document.querySelectorAll('ul.tabs li a[href="' + document.location.hash + '"]')[0].click();