问题
I'm using the Flexy template (using bootstrap) and I can't get the shown.bs.tab event on tab to work.
I've managed to make it work on JSFiddle.
Here is the code I use in my template that produce nothing :
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>
<script>
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
alert(e.target.href);
})
});
</script>
What can I miss ? If I copy/paste this code on the Flexy code it doesn't work. What are the steps to understand what is wrong ? Thanks !
回答1:
Bootstrap tab events are based off the .nav-tabs
elements, not the .tab-content
elements. So in order to tap into the show event, you need the element with an href that is pointed towards #tab1
, not the #tab1
content element itself.
So instead of this:
$('#tab1').on('shown.bs.tab', function (e) {
console.log("tab1");
});
Do this instead:
$('[href=#tab1]').on('shown.bs.tab', function (e) {
console.log("tab1");
});
Or, to capture all of them, just do this:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
Demo in Stack Snippets
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#chart1" role="tab" data-toggle="tab">Tab 1</a></li>
<li><a id="tab2" href="#chart2" role="tab" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="chart1">Tab 1 Content</div>
<div class="tab-pane" id="chart2">Tabe 2 Content</div>
</div>
</div>
回答2:
If the Tab is dynamic in anyway try using
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert(e.target.href);
})
回答3:
The issue was more a rails-related one.
I ended up by removing one by one every piece of code since the issue was not there in the raw template as @KyleMit says.
Whenever I remove the line //= require bootstrap-sprockets
from my application.js file the issue disappears !
The issue was that I was requiring both bootstrap
and bootstrap-sprockets
. I should have require just one of them but not both.
回答4:
In my case, there was a conflict between Jquery and Bootstrap.
I solved the problem with jQuery.noConflict(). See below!
I hope that helps!
// Issue @ tabs toggle
jQuery.noConflict();
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
alert(e.target.href);
});
回答5:
The issue I faces was that I had 2 sets of tabs on my page. and I had already bound the 1st tab set with
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
For the 2nd tab set also i had defined the same way.. but I had assigned an id to the ul and bound the click element as:
$('#tabId > li > a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log(e.target.href);
})
The 1st tab was working here but the 2nd wouldn't work. I then figured it out and assigned id's to both uls.. now it works
来源:https://stackoverflow.com/questions/30468111/bootstrap-shown-bs-tab-event-not-working