I am using the Bootstrap framework through out the entire site for the responsive design ability. I am also using AJAX calls to switch between every page. On one page I am using the Bootstrap tabs to switch between page contents. Everything works perfectly when you are directed to the page through any of the ajax links but if you manually type in the url the tab contents wont change. The tabs themselves will change when you click on them but the content stays on the original content. I originally though it might have something to do with the javascript I'm using so that you can direct the user to a certain tab with a hashtag but it still doesn't work when I remove the code. Here is the code:
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
Tab #1
</div>
<div class="tab-pane" id="tab2">
Tab #2
</div>
<div class="tab-pane" id="tab3">
Tab #3
</div>
<div class="tab-pane" id="tab4">
Tab #4
</div>
</div>
<script>
$(function(){
if (window.location.hash) {
var hash = window.location.hash;
var tab = $('[data-toggle="tab"][href="' + hash + '"]');
tab.show();
tab.tab('show');
}
});
</script>
Can anyone help me with this?
You have to add a listener to the hashchange window event.
You probably opened the page without a hash. At this point, your script was executed. When you change the hash in your adress bar, the page will not be reloaded. So there is no-one to handle that event. For this you have the hashchange event to react to such changes.
See the MDN documentation for more info and examples on this event.
If you are using jQuery, check out this answer.
Related
I am using Bootstrap tabs to load a widget from a server. What I need is to load the tab content as soon as the user click the tab instead of the initial load of the page. For ex below is the HTML for the page:-
<ul class="nav nav-tabs" role="tablist">
<li class="active">FX</li>
<li>US Bond Futures</li>
<li>US Short Term IR futures</li>
<li>Global Equity Indices</li>
<li>Commodities</li>
<li>Volatility</li>
</ul>
<!-- Tab Content -->
<div class="tab-content">
<!-- FX TAB content -->
<div class="active tab-pane fade in" id="tabs-first">
</div>
</div>
The first tab is referencing to the #tabs-first id and second tab to the #tabs-second. I want to load #tabs-second only when user clicks on that tab not during the initial load of the page.
What kind of content you want to fetch? Use .load(), as you want to target for #tabs-second only, register click handler to that element like so:
$('[href="#tabs-second"]').click(function(){
$('#tabs-second').load('remoteUrl');
// or use callback/complete
$('#tabs-second').load('remoteUrl', function () {
// do something here
});
});
I'm rusty at javascript and HTML, and trying to get back into it.
Here's the sample code of the element I'd like to modify:
<div id="tabContainer" class="table">
<h1>Container</h1>
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab_display">
<div id="tab1" class="tab_content"></div>
<div id="tab2" class="tab_content"></div>
<div id="tab3" class="tab_content"></div>
</div>
</div>
I'm using a version of jQuery Accordion to switch between tabs,and it works without any trouble. Clicking on tab 2, while tab 1 is selected, will clear 'tab_display' and display the contents of tab 2.
I would like to control what tab is displayed, by clicking for a button for example.
If tab 1 is being displayed and I click another button on the page, I'd like for a specific tab to be displayed (show the selection on the 'tabs' list, and also show the contents in the 'tab_dsiplay').
How can I do this?
Thanks!
Try using the solution here open-jquery-accordion-panel-with-link-outside-of-acccordion
Demo here.
Is there a way to do the following
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<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 class="tab-pane" id='extra'> .... </div>
</div>
so there is another tab pane called #extra, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event
as bootstrap tabs.js works from trigger a tab('show') on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?
note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc
You could add the tab for extras and then just hide it
Add this to your nav-tabs:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
Then activate from somewhere else with JavaScript:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
Working demo in jsFiddle
Alternatively, you could just handle the whole thing yourself. The only thing .tab('show') does is remove the active class from all the other nav-tabs and tab-content elements. And then add back the .active class on the appropriate elements.
So first remove all the active elements and then add back the active class:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
Working demo in jsFiddle
Create a link in memory and call the tab function on it.
$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")
an anchor link is used when you want to navigate. If you dont want to navigate, use a button. But style it like a link.
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<button class="btn btn-sm btn-link">Tab1</button>
</li>
</ul>
nows its a button and will not navigate. Just add any javascript you want to it.
But I recommend to use the anchor. Javascript tabs dont support history back in the browser. And its often tricky to start with ex. tab number 4 selected. I often let every tabpage be an own page. With its own route
I have a JSP page which uses bootstraps data-toggle="tab" functionality. Upon page load I make one tab active.
<ul class="nav st-nav-tabs">
<li class="active">First Tab</li>
<li>Second Tab</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1"></div>
<div class="tab-pane active" id="tab2"></div>
</div>
I have a Highcharts chart on the page, whenever a user clicks on one of the columns I call a JS function which makes tab2 the active tab on the page. Inside this function I've tried a few different commands but none seem to work. I'm quite new to jQuery so I'm hoping someone might be able to point out where I'm going wrong with my syntax.
function handleClick(){
//I've tried the following, none seem to work
$('#tab2').toggleClass('active');
$('#tab2').show();
$('#tab2').tab('show');
}
First you need to give your tabs an id, i will call it myTabs:
<ul class="nav st-nav-tabs" id="myTabs">
Then you can call and show your tabs by name to show them:
$('#myTabs a[href="#name"]').tab('show');
You can read about tabs in bootstrap's documentation.
I have a navigation menu at the top of my webpage with a drop down. For example the service page under nav has a drop down of our other services that go to a service page with a tab structure like so:
<section class="tabs">
<ul class="tab-nav">
<li class="active">First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div class="tab-content">
<p>Here's the first piece of content</p>
</div>
<div class="tab-content active">
<p>My tab is active so I'll show up first! Inb4 tab 3!</p>
</div>
<div class="tab-content">
<p>Don't forget about me! I'm tab 3!</p>
</div>
</section>
and I would like like to make it so that I could use my achor tags on my home page to link directly to tab 3 or 1 or 2 of my choosing as well as when I refresh the page with the tabs the tab doens't jump to the active tab. How can I do this with javascript? I attempted it with this hash check function bit of code:
$(function () {
$(".tab-content").hide().first().show();
$(".tab-nav li:first").addClass("active");
$(".tab-nav a").on('click', function (e) {
e.preventDefault();
$(this).closest('li').addClass("active").siblings().removeClass("active");
$($(this).attr('href')).show().siblings('.tab-content').hide();
});
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
});
The problem is, is that when I click the second tab, it shows the content on the first tab... but tab 3 looks fine. But when I click on tab 3 and then go back to tab 2, no content displays under tab 2. Maybe someone can simply my code for what I'm trying to accomplish?
ps. I'm using the gumby framework for my tabs
First of all, $($(this).attr('href')) isn't going to find anything, so none of the tabs would be working anyway.
Apart from that, the hash linking code seems to be fine.
I've rewritten the code so that it works now below.
Link: http://jsfiddle.net/s8Ttm/2/
Code:
$(".tab-nav a").bind('click', function (e) {
e.preventDefault();
$(this).parents('li').addClass("active").siblings().removeClass("active");
$('.tab-content').removeClass('active').hide();
console.log($('.tab-content:eq('+$(this).index()+')'));
$('.tab-content:eq('+$(this).parents('li').index()+')').addClass('active').show();
});
$('.tab-nav a').first().click();
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');