使用 url 加载页面上的活动选项卡答案

【问题标题】：Active tab on page load with url使用 url 加载页面上的活动选项卡
【发布时间】：2016-10-17 04:22:57
【问题描述】：

我有三个链接

<a href="index.php?page=tabs">Level</a>
<a href="index.php?page=tabs">Function</a>
<a href="index.php?page=tabs">Programs</a>

我想在页面加载时调用此选项卡

php url是这样的

index.php?page=tabs（用于打开包含所有选项卡的页面）

<ul class="nav nav-tabs faq-cat-tabs">
   <li><a href="#faq-cat-1" class="btn btn-info" data-toggle="tab"><i class="fa fa-shield"></i> Levels</a></li>
   <li> <a href="#faq-cat-3" class="btn btn-info" data-toggle="tab"><i class="fa fa-sitemap"></i> Functions</a></li>
   <li> <a href="#faq-cat-2" class="btn btn-info" data-toggle="tab"><i class="fa fa-puzzle-piece"></i> Programme Calander</a></li>
</ul>

每次点击时，我都想激活上一个列表中的不同标签

我的url的php页面是这样的

<?php include 'Header.php';

if(isset($_GET['page'])){
    $page = trim($_GET['page']);
    include $page.'.php';

}else{
    include 'Home.php';
}

?>
<?php include 'Footer.php'; ?>

总之想在页面加载时打开标签我已经尝试过index.php?page=level#faq-cat-1 等等，但它不起作用。

【问题讨论】：

欢迎来到 StackOverflow - 请阅读我们的 How to Ask 页面以获取有关如何改进此问题的提示。现在，要么缺少某些代码，要么问题可能更清楚。另外，在问题中添加minimal reproducible example

标签： javascript jquery css twitter-bootstrap tabs

【解决方案1】：

假设您的 URL 中有“www.stackoverflow.com/page#tab1”，并且您想让 tab1 处于活动状态。

"www.xyz.com/page#tab1";

现在在加载页面时获取 URL

var url = window.location.href;

从 url 链接获取要激活的选项卡。

var activeTab = url.substring(url.indexOf("#") + 1);

删除旧的活动标签类

$(".tab-pane").removeClass("active in");

将活动类添加到新标签

$("#" + activeTab).addClass("active in");

或者得到activeTab后直接打开tab。

$('a[href="#'+ activeTab +'"]').tab('show')

【讨论】：

【解决方案2】：

在页面加载时添加此选项以根据哈希显示标签

$(function(){
   $('.faq-cat-tabs a[href="'+window.location.hash+'"]').tab('show');
});

文档：http://getbootstrap.com/javascript/#tabs-usage

【讨论】：

【解决方案3】：

如果您使用的是 Bootstrap 或 MDB 那么您只需检查哈希 URL 并点击该锚 URL 的选项卡事件

const anchor = window.location.hash;
$(`a[href="${anchor}"]`).tab('show');

【讨论】：