Last active
October 20, 2019 14:05
-
-
Save ofyalcin/bf0839a2bd653c1538cf10b8e9ae4d06 to your computer and use it in GitHub Desktop.
Open Bootstrap tabs & pills tabs from another page (hash anchor)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
</head> | |
<body> | |
<ul class="nav nav-tabs" id="myTab" role="tablist"> | |
<li class="nav-item"> | |
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a> | |
</li> | |
<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> | |
<li class="nav-item"> | |
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a> | |
</li> | |
</ul> | |
<div class="tab-content" id="myTabContent"> | |
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> | |
Home tab content | |
</div> | |
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> | |
Profile tab content | |
</div> | |
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> | |
Contact tab content | |
</div> | |
</div> | |
<script> | |
//get hash from url | |
var hash = window.location.hash; | |
//checks the hash tag is set | |
if (hash != "") { | |
//removes all active classes from tabs | |
$('#myTab li a').each(function() { | |
$(this).removeClass('active'); | |
}); | |
$('#myTabContent div').each(function() { | |
$(this).removeClass('active show'); | |
}); | |
//this will add the active class on the hashtagged value | |
var link = ""; | |
$('#myTab li a').each(function() { | |
link = $(this).attr('href'); | |
if (link == hash) { | |
$(this).addClass('active'); | |
} | |
}); | |
$('#myTabContent div').each(function() { | |
link = $(this).attr('id'); | |
if ('#'+link == hash) { | |
$(this).addClass('active show'); | |
} | |
}); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment