Active tab on page load with url

Question

I have three links

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

I want to call this tab active on page load

php url is like this

index.php?page=tabs (for open the page with these all 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>

On each click I want to active different tabs active in previous list

My php page for url is like this

<?php include 'Header.php';

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

}else{
    include 'Home.php';
}

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

In short want to open tabs on page load And I have tried index.php?page=level#faq-cat-1 and so on but it won't work.

Answer 1

Suppose you have in your URL "www.stackoverflow.com/page#tab1" and you want to make tab1 active.

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

Now on load of the page get the URL

var url = window.location.href;

Get the tab to make active from url link.

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

Remove old active tab class

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

Add active class to new tab

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

Or directly open tab after getting activeTab.

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

Answer 2

Add this at page load to display the tab in based on hash

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

Documentation: http://getbootstrap.com/javascript/#tabs-usage

Answer 3

If you are using Bootstrap or MDB then you have just check the hash url and hit the tab event of that Anchor URL

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