javascript - 带有 url 的页面加载上的事件选项卡

Question

我有三个链接

<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 等等，但它不起作用。

Answer 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')