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.
Related
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');
};
How can i open Order tab using java-script function and also assign active class to the opened tab.
I have tried the below code but it didn't work.
<script>
function showmodal() {
$('#Order').modal('toggle').addClass('active');
}
</script>
-
<ul class="nav nav-tabs" id="myTab">
<li class="active">Active Customer</li>
<li>
<asp:LinkButton OnClientClick="showmodal()" ID="LinkButton1" runat="server">Order</asp:LinkButton></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
home
</div>
<div class="tab-pane" id="Order">
<div class="row">
<div class="col-md-12">
Order
</div>
</div>
</div>
</div>
</div>
You usually open a tab by calling ...tab("show") on the tab's a element but since you don't seem to have an a element for the Order tab, you'll have to add the active class to this tab yourself and remove it from the others.
Eg:
$("#Order").closest(".tab-content").find(".tab-pane").removeClass("active");
$("#Order").addClass("active");
You should take a look at the documentation to see how to properly use tabs.
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 have tabs set up on my website and they all seem to be working fine except that the links inside the tabs do not work. It works if I right-click and say open in new tab, but otherwise nothing happens. I think the issue is with bootstrap.js and something that I'm doing, but I can't figure out what.
Here is the site: http://www.rightcall.co/features. Look at the links in the last 3 tabs
Here is a simple version of my code:
<div class="tabbable features tabs-left row-fluid">
<ul class="nav nav-tabs span3 uppercase">
<li class="active">Overview</li>
<li>What you get</li>
<li>Our Process</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="l1">
<h3>Overview</h3>
<a href="/anotherpage">
</div>
<div class="tab-pane" id="l2">
<h3>What You Get</h3>
<a href="/anotherpage">
</div>
<div class="tab-pane" id="l3">
<h3>Our Process</h3>
<a href="/anotherpage">
</div>
</div>
</div>
</div>
Thank you in advance for any advice you have. I'm pretty new to Bootstrap, so I'm kinda at a loss.
In your javascript you select all '.tabbable a''s with jquery and prevent the default click action:
$('.tabbable a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
You should make it:
$('.tabbable .nav-tabs a').click( //etc..
This way no other a's are selected by jQuery..
Also I should point out that linking your site in StackOverflow to let people look into your bug/problem is against the rules. Only post the code (HTML/CSS/JS) so that others finding the question can solve their problems with it too.
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();