I want to create a link that will target a specific tab, in another page of my site.
I have tried to create link like this: www.example.com/test.html#tab2, but it always targets the first tab (I guess the tab with show class).
index.html
link for catalog
text.html
<ul class="nav nav-tabs">
<li id="homeTab" class="active"><a data-toggle="tab" href="#home" aria-expanded="true">menu 1</a></li>
<li id="menu1Tab"><a data-toggle="tab" href="#menu1">menu 2</a></li>
<li id="menu2Tab"><a data-toggle="tab" href="#menu-catalog">menu 3</a></li>
<li id="menu3Tab"><a data-toggle="tab" href="#menu3">menu 4</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
...
</div>
<div id="menu1" class="tab-pane fade">
....
</div>
<div id="menu-catalog" class="tab-pane fade">
...
</div>
<div id="menu3" class="tab-pane fade">
...
</div>
</div>
When I click the link from index.html to target and open the tab with the right ID.
If you're using the bootstrap + jquery setup, you can get this behavior pretty easily with the following:
$(() => {
const {
hash
} = document.location;
if (!hash) return false;
$(`.nav.nav-tabs [href="${hash}"]`).tab('show');
});
Try this
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
Related
I'm having an issue with my site. It has a page with two tabs. In the second tab, there is a pagination and I'm using bootstrap. The issue I'm having is when I click a different page on the pagination, it goes back to the 1st tab.
I have tried to fix it using hash links. When I do that, it flashes the 1st tab for milliseconds and then shows the 2nd tab which is not what I want. I want it to show the same tab even after clicking the pagination. Also, note that I'm using Ajax.
<ul class="nav nav-tabs" id="resumes-tab">
<li class="active"><a data-toggle="tab" href="#shortlisted-resumes-list" aria-expanded="true">Shortlisted</a></li>
<li class=""><a data-toggle="tab" href="#download-resumes-list" aria-expanded="false">Downloads</a></li>
</ul>
<div class="tab-content">
<div id="shortlisted-resumes-list" class="tab-pane fade active in">
<div class="cs-resumes" data-adminurl="https://example.com/wp-admin/admin-ajax.php"></div>
</div>
<div id="download-resumes-list" class="tab-pane fade">
<div class="cs-resumes" data-adminurl="https://example.com/wp-admin/admin-ajax.php">
<nav>
<ul class="pagination">
<li><a aria-label="Previous"><span aria-hidden="true"><i class="icon-angle-left"></i>Previous</span></a></li>
<li><a class="active">1</a></li>
<li><span aria-hidden="true">Next <i class="icon-angle-right"></i></span></li>
</ul>
</nav>
</div>
</div>
</div>
Here's my jQuery snippet
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "";
if (hash) {
jQuery('.nav-tabs a[href="' + hash.replace(prefix, "") + '"]').tab('show');
}
// Change hash for page-reload
jQuery('.nav-tabs a').on('shown.bs.tab', function (e) {
var hash = document.location.hash;
window.location.hash = e.target.hash.replace("#", "#" + prefix);
jQuery("html, body").animate({ scrollTop: $(".cs-dash-resumes-tabs").offset().top }, "slow");
});
</script>
Why does this happen? Because I'm using Ajax?
EDIT: So i ditched the whole thing and resorted to javascript with these new codes #Udara Kasun's code worked and it was close but not what I was trying to achieve. tried these codes for a while and i think i almost got it.
<script>
function myFunction1()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(1) a').tab('show')
});
}
function myFunction2()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(2) a').tab('show')
});
}
function myFunction3()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(3) a').tab('show')
});
}
</script>
<li role="presentation" class="active" id="tabMenu1" onclick="myFunction1()">
<a href="#tabZone" data-toggle="tab" role="tab" aria-controls="tab1">
Zones
</a>
</li>
<li role="presentation" id="tabMenu2" onclick="myFunction2()">
<a href="#tabChapels" data-toggle="tab" role="tab" aria-controls="tab2">
Chapels
</a>
</li>
<li role="presentation" id="tabMenu3" onclick="myFunction3()">
<a href="#tabUnits" data-toggle="tab" role="tab" aria-controls="tab3">
Units
</a>
</li>
Did you try to do like this?
$(document).ready(function(){
$('.nav-tabs a:last').tab('show') ;
var lastselectedtab = localStorage.getItem("ActiveTab");
$('.nav-tabs a[href="'+(lastselectedtab==''?"#tabChapels":lastselectedtab)+'"]').tab('show');
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
localStorage.setItem("ActiveTab", target);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
Zones
</li>
<li role="presentation">
Chapels
</li>
</ul>
<div id="tabContent1" class="tab-content" style="font-family:Arial Unicode MS;">
<div role="tabpanel" class="tab-pane fade" id="tabZone">
Content 1
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tabChapels">
Content 2
</div>
</div>
</div>
Code pen Link
https://codepen.io/udarakasun/pen/YdyRRy
Nobody seemed to care anymore haha anyways for those of you who are wanting to achieve the same thing that I wanted to, I've created a stupid and ingenious way but it works.
<script language="javascript">
<?php
if(isset($_GET['tabName']))
{
if($_GET['tabName']=="TAB1")
{
echo "var tabNo=1;";
$_SESSION['tabNo']=1;
}
elseif($_GET['tabName']=="TAB2")
{
echo "var tabNo=2;";
$_SESSION['tabNo']=2;
}
}
?>
function loadscript()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child('+<?php echo $_SESSION['tabNo'];?>+') a').tab('show')
});
}
function myFunction1()
{
var tabName="TAB1";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
function myFunction2()
{
$(document).ready(function()
{
$('.nav-tabs li:nth-child(2) a').tab('show')
});
var tabName="TAB2";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
function myFunction3()
{
var tabName="TAB3";
window.location.href = "panel_gkkmain.php?tabName=" + tabName;
}
and for the body, you have to declare onload="loadscript()"
After that you'll need to add bootstrap components to your page. This can be done easier through ADOBE DREAMWEAVER.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active" onClick="myFunction1()">
<a href="#home1" data-toggle="tab" role="tab" aria-controls="tab1">
Zones
</a>
</li>
<li role="presentation" onClick="myFunction2()">
<a href="#paneTwo1" data-toggle="tab" role="tab" aria-controls="tab2">
Chapels
</a>
</li>
I have code:
if (location.hash) {
$('a[href=\'' + location.hash + '\']').tab('show');
}
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
$('a[href="' + activeTab + '"]').tab('show');
}
$('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
e.preventDefault()
var tab_name = this.getAttribute('href');
if (history.pushState) {
history.pushState(null, null, tab_name)
}
else {
location.hash = tab_name
}
localStorage.setItem('activeTab', tab_name)
$(this).tab('show');
return false;
});
$(window).on('popstate', function () {
var anchor = location.hash ||
$('a[data-toggle=\'tab\']').first().attr('href');
$('a[href=\'' + anchor + '\']').tab('show');
});
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<ul class="nav" 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">This is home tab</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">This is profile tab</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">This is contact tab</div>
</div>
How I can prevent show first active tab, when page reloading with other tab? My tabs save on localstorage, and when I reload page with other tab, he's first display me first tab, and between my tab. How I can prevent this bug?
Remove the active (but keep the show) class from your tabs (both the links and the tabs themselves).
Also, change your "default" (on page load) script to this:
if (location.hash) {
$('a[href="' + location.hash + '"]').tab('show');
} else {
activeTab = localStorage.getItem('activeTab');
if (activeTab) {
$('a[href="' + activeTab + '"]').tab('show');
} else {
$('#home').addClass('active');
}
}
Because for some reason, using $('a[href="#home"]').tab('show'); won't work on page load (it won't show its contents), which has got to be a bug. $('#home').addClass('active'); will add back the active class to your default tab instead (only if there is no tab hash in the URL and nothing in localStorage either).
I am basically facing the same problem as described here, under the additional context of Rails' Turbolinks.
I am using this piece of code
$(document).on('ready page:change', function() {
/* Show tab from anchor */
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
/* Update URL anchor after selecting tab */
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
Which does work for manual page reload (F5) and for cache restore, but not after reloading the page from a Turbolinks click*.
*When clicking a turbolinks link, if there is some cache of the page, then that cache is first restored and the good tab is shown, but then thre is still a request to the server to get the last contents, and once that request arrives and is parsed, the tab "switches back" to the original one
My bootstrap code looks like this
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#student" role="tab"></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#mentor" role="tab"><%= </a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#company" role="tab"></a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<br />
<div class="tab-pane fade in active" id="student" role="tabpanel">
...
</div>
<div class="tab-pane fade" id="mentor" role="tabpanel">
...
</div>
<div class="tab-pane fade" id="company" role="tabpanel">
...
</div>
</div>
Rails 5 comes with Turbolinks 5. The solution was just to change the name of the event listener
$(document).on('ready turbolinks:load', function() {
This is my view:
<div class="tabbable">
<ul class="nav nav-tabs">
<li id="liTab1" class="active"><a id="a1" data-toggle="tab">Upload TOT Master</a></li>
<li id="liTab2"><a id="a2" data-toggle="tab">View TOT Master</a></li>
<li id="liTab3"><a id="a3" data-toggle="tab">Upload TOT Master Adhoc</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>Howdy, I'm in Section 3.</p>
</div>
</div>
</div>
The above code which represents the view in tab container format like below:
On changing the tab, I want its corresponding content div should become active and remaining tab would become inactive. I used the below javascript function, but its not working:
jQuery:
$(document).ready(function () {
$("#a1").click(function () {
$("#liTab1").addClass('active');
$("#liTab2").removeClass('active');
$("#liTab3").removeClass('active');
$("#tab1").addClass('tab-pane active');
$("#tab2").addClass('tab-pane inactive');
$("#tab3").addClass('tab-pane inactive');
});
$("#a2").click(function () {
$("#liTab1").removeClass('active');
$("#liTab2").addClass('active');
$("#liTab3").removeClass('active');
$("#tab2").addClass('tab-pane active');
$("#tab1").addClass('tab-pane inactive');
$("#tab3").addClass('tab-pane inactive');
});
$("#a3").click(function () {
$("#liTab1").removeClass('active');
$("#liTab2").removeClass('active');
$("#liTab3").addClass('active');
$("#tab3").addClass('tab-pane active');
$("#tab1").addClass('tab-pane inactive');
$("#tab2").addClass('tab-pane inactive');
});
});
How to achieve this?
Twitter-bootstrap-tabs have one more property in html called data-target which when set to its corresponding tab target will automatically do this for you without any help of javascript. Check the below code and DEMO here
<ul class="nav nav-tabs">
<li id="liTab1" class="active"><a id="a1" data-target="#tab1" data-toggle="tab">Upload TOT Master</a></li>
<li id="liTab2"><a id="a2" data-target="#tab2" data-toggle="tab">View TOT Master</a></li>
<li id="liTab3"><a id="a3" data-target="#tab3" data-toggle="tab">Upload TOT Master Adhoc</a></li>
</ul>
You don't have to access the item individually nor you have to add the anchor inside the list. You can just change the pointer using css.
You can change html in this way:
<li id="liTab1" class="active" data-tab="tab1">Upload TOT Master</li>
<li id="liTab2" data-tab="tab2">View TOT Master</li>
<li id="liTab3" data-tab="tab3">Upload TOT Master Adhoc</li>
and this is the js piece of code:
$('ul.nav-tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.nav-tabs li').removeClass('active');
$('.tab-pane').removeClass('active');
$(this).addClass('active');
$("#"+tab_id).addClass('active');
});