Further to the other suggestions you could just throw the below on the page after the link to the jQuery library to show specific tabs as being active on page load:
<script>
$('#myTab a[href="#profile"]').tab('show')
</script>
Below is some standard Bootstrap tab code: The above refers to the tabs 'href'
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
</ul>
So plenty of ways you can consider.
Anyone not wanting a Bootystrap/jQuery version can consider the code below. I'm told jQuery is dead in the water. Bootstrap is probably another 2 years away from dropping jQuery dependancy, so y'all who are currently using Bootstrap, according to the nerds, are going backwards. Happy Days!!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TAB PANELS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: helvetica, verdana;
font-size: 16px;
line-height: 20px;
color: #666;
}
.tabs {
width: 60%;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.tabs {
width: 95%;
}
}
.tab-panel {
display: none;
}
.tab {
text-decoration: none;
padding: 14px 20px 10px 20px;
display: inline-block;
color:#36F;
}
.active {
display: inline-block;
border-radius: 4px 4px 0 0;
border: 1px solid #d9d9d9;
border-bottom: 1px solid #fff;
color: #666;!important;
}
.activePanel {
display: block;
margin-top: -1px;
border-top: 1px solid #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<div class="tabs">
<a href="#" class="tab active">TAB 1</a>
<a href="#" class="tab">TAB 2</a>
<a href="#" class="tab">TAB 3</a>
<div class="tab-panel activePanel">
Tab 1 stuff goes here
</div>
<div class="tab-panel ">
Tab 2 stuff goes here
</div>
<div class="tab-panel">
Tab 3 stuff goes here
</div>
</div>
<!-- end tabs -->
<script>
var currentTab = document.querySelectorAll('.tab');
var tabPanel = document.querySelectorAll('.tab-panel');
for(var i = 0; i < currentTab.length; i++) {
currentTab.position = i;
currentTab.onclick = function() {
activePanel = this.position;
for(var i = 0; i < currentTab.length; i++) {
currentTab.classList.remove('active');
tabPanel.classList.remove('activePanel');
}
this.classList.add("active");
tabPanel[activePanel].classList.add('activePanel');
}
}
// Specific page
// Remove 'active' and 'activePanel' from html and set the active tab/panel below
currentTab[0].classList.add('active');
tabPanel[0].classList.add('activePanel');
</script>
</body>
</html>
AdChoices