使用網址加載頁面上的活動標簽

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后直接打開選項卡。

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

Answer 2

在頁面加載時添加此內容以基於哈希顯示選項卡

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

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

Answer 3

如果您使用的是Bootstrap或MDB，則只需檢查哈希URL並點擊該Anchor URL的tab事件

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