I am using tab panes defined as
<ul class="nav nav-tabs">
<li>Personal Information</li>
<li class="active">Contact</li>
<li>Parent/Guardian Information</li>
<li>Educational Background</li>
<li>Study Prospects</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="personal"></div>
<div class="active tab-pane" id="contact"></div>
<div class="tab-pane" id="guardian"></div>
</div>
It can be seen that i have selected Contact as First selected Tab, however when I refresh the page< on full page load it automatically changes tab to Personal that is First tab.
Is there any way i can manually switch tabs via javascript etc?
There is a solution to change the tabs, so you will need to:
Keep the last tab some where.
Call the below function when the page refresh.
This how you can call it:
activeTab('tab1');
function activeTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
This is the code you need.
HTML:
<li id="contact">Contact</li>
JavaScript:
window.onload = function() {
document.getElementById('contact').classList.add('active');
};
Related
I have such HTML:
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active">TAB1</li>
<li class="">TAB2</li>
<li class="">TAB3</li>
</ul>
</div>
This is navigation for tabs. But it behaves something different: when I click on the link (for example: TAB1) - required tab is displayed. But there is not the anchor in url(#tab1 or #tab2 or #tab3). But I need it...
I am some new in fronted and I use ready template. So there are such frameworks:
jquery.js, bootstrap.min.js, js/jquery.isotope.min.js
What should I do??
Maybe it's related to this question and this (if you are using bootstrap for tabs managing).
This question already has answers here:
How can I keep selected Bootstrap tab on page refresh?
(19 answers)
Closed 7 years ago.
I have implemented nav-tabs in my project using bootstrap.When we enter the application,Home tab is active.When i make changes in the other tabs and press save button,the page is going to the Home tab.
I want the tab on which i've made changes to be active.
The below is similar code i've used in my project.
HTML
<div class="nav">
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#about">About</a></li>
<li><a data-toggle="tab" href="#subscribe">Subscribe</a></li>
<li><a data-toggle="tab" href="#search">Search</a></li>
<li><a data-toggle="tab" href="#logout">Logout</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<h1>Hospital Data Solutions</h1>
<p>Financial Analysis Database</p>
</div>
<div class="tab-pane" id="about">
<h1>About Us</h1>
<p>Cost Reports and Financial Analysis Nationwide Database</p>
</div>
<div class="tab-pane" id="subscribe">
<h1>Annual Subscription</h1>
<p>Purchase an annual subscription to access all cost reports.</p>
<h2>Individual Cost Reports</h2>
<p>Purchase individual cost reports directly from us in .pdf, .xs, .csv formats.</p>
</div>
<div class="tab-pane" id="search">
<h1>Search our database</h1>
<p>Search content goes here.</p>
</div>
<div class="tab-pane" id="logout">
<h1>logout</h1>
<p>Logout fx goes here.</p>
</div>
</div>
</div>
</div>
</div>
Fiddle here
First, you need to add the selected tab hash to the url.
Here's an example with JQuery :
$('a[data-toggle="tab"]').click(function(e) {
var hash = $(this).attr('href');
location.hash = hash;
});
Next, you need to show the tab linked to the hash added to the url when you load the page :
$(function() {
var hash = window.location.hash;
var $nav = $('ul.nav a[href="' + hash + '"]');
hash && $nav.trigger('click');
});
It seems, basically what you need to do, is to add the class active to the <li> tag, when entering the page, and removing it from other <li> elements.
<li class="active">
<a data-toggle="tab" href="#about" aria-expanded="false">
About
</a>
</li>
You could achieve that with jQuery. Just set the appropriate class during page initialization. With jQuery you will also have to bind the appropriate events to the elements, as Martin Lezer explains in his answer:
The question is, how to you remember the state of the application between refreshs. Here are some possibilities:
Cookies: Set a cookie with the status, each time you click on a tab
Local storage or session storage of the browser. Same principle as 1
Location-Hash: see answer of Martin Lezer here.
URL-Parameters: You could use those to remember the app-state, but I would recommend against it, because usually you do not want to have this kind of information in the URL.
1 and 2 are persistent, that means, you can come back tomorrow and the application can init with the same state
3 and 4 are not persistent, you need to pass that information each time you enter the application (which is fine, during a session)
Hope that helps.
I am applying bootstrap tab to my web page. The challenge here is that I have tabs on top and bottom of the tab content.
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-top">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-bottom">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
I want the bottom tabs to change accordingly when I click on the top once and visa-versa.
The tab content is changing but the two tabs - top and bottom need to change in tandom i.e when i click on "Profile" on top - it needs to make "Profile" in bottom active
I have tried searching for some solutions using data-target but with no success. I am guessing that javascript or jquery might be needed.
Any suggestion or tips will be appreciated.
Thanks
Try this:
$('.nav-tabs-top a[data-toggle="tab"]').on('click', function(){
$('.nav-tabs-bottom li.active').removeClass('active')
$('.nav-tabs-bottom a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})
$('.nav-tabs-bottom a[data-toggle="tab"]').on('click', function(){
$('.nav-tabs-top li.active').removeClass('active')
$('.nav-tabs-top a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})
Result here
Code here
Here's a version that works in Bootstrap 4 (the class "active" is applied to the <a> element, not the <li> element). This version also automatically creates the bottom tabs for you: https://gist.github.com/epicfaace/fa31d5133d3dd89b7f0caf72ebba5af9
my knowledge of js is very limited. I've already read the official docs and several threads on the web. Still I have some issues. I need to programmatically shows the tabs, because I have to do some operations when a tab is shown.
According to the twitter bootstrap documentation, here a small piece of code:
<ul id="tabs" class="nav nav-tabs">
<li>State</li>
<li>Graph</li>
<li>Setup</li>
</ul>
<div class="tab-content">
<div id="state" class="tab-pane fade">
</div>
<div id="graph" class="tab-pane fade">
</div>
<div id="setup" class="tab-pane fade">
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$('#tabs a').click(function (e) {
e.preventDefault();
console.log("Activating a tab");
$(this).tab('show');
})
$('a[data-toggle="tab"]').on('shown', function (e) {
console.log("Tab activated");
e.target // activated tab
e.relatedTarget // previous tab
})
</script>
The first script activate each tab - and it's working.
The second one should subscribe to the 'shown' event and e.target should contain the activated tab's reference.
I get the first console message ("Activating a tab") but not the second. So I bet there is something I'm missing to correctly subscribing to the event.
Two problems I cannot understand. In order to get the stuff working I can't use js to activate tabs but just rely on bootstrap data-toggle item. The other strange thing is only the 'show' event will fire, the 'shown' won't. Do you know why?
You need to add data-toggle="tab" to your links. So your first part should be rewritten like the following
<ul id="tabs" class="nav nav-tabs">
<li><a data-toggle="tab" href="#state">State</a></li>
<li><a data-toggle="tab" href="#graph">Graph</a></li>
<li><a data-toggle="tab" href="#setup">Setup</a></li>
</ul>
Then you should be able to see your Tab activated message in the console.
In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)
I tried adding this to the above script, to see if triggering it manually could work:
$('a[data-toggle="tab"]:first').tab 'show'
... but it didn't.
This is the HTML code I use in my view
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<%=t :updates, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :activity, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :articles, :scope => 'user.profile.sections'%>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="updates">
</div>
<div class="tab-pane" id="activity">
</div>
<div class="tab-pane" id="articles">
</div>
</div>
</div>
Any clue?
Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.
JSFiddle
You can trigger the event manually when you tell the page to show the tab:
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's
In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs
You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs
After my
$("#modal").modal('show');
I added this and it worked just fine:
$('a[data-toggle="tab"]:first').click();