In my page i use bootstrap's tab, but when i click each of tab, content of tab doesn't show correctly, this is my code:
<div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active"><a href="#tab-home" data-value="#home" data-toggle="tab">Home</a></li>
<li><a href="#tab-fav" data-value="#fav" data-toggle="tab">Favoriets</a></li>
<li><a href="#tab-fr" data-value="#fr" data-toggle="tab">Friends</a></li>
<li><a href="#tab-ex" data-value="#ex" data-toggle="tab">Experience</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab-home">
HOME
</div>
<div class="tab-pane fade active" id="tab-fav">
My favoriets
</div>
<div class="tab-pane fade active" id="tab-fr">
My Friends
</div>
<div class="tab-pane fade active" id="tab-ex">
My experience
</div>
</div>
<script type="text/javascript">
$(function () {
var navTabs = $('.nav-tabs a');
var hash = window.location.hash;
hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');
navTabs.on('shown', function (e) {
var newhash = $(e.target).attr('data-value');
window.location.hash = newhash;
});
})
</script>
</div>
Where am i wrong? How can i fix it?
You have active
class on all tab-pane
divs. Remove it from all of them but the first one. BTW, in bootstrap 3, the event it is not show
, it is shown.bs.tab
Bootstrap 3 tabs .
I personally use this code: Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink , the only change I made, was to replace the on('show'
with on('shown.bs.tab'
.
On your JSFiddle a reference to the jQuery library is missing. Once adding a jQuery reference under Frameworks & Extensions it's switching tab content.
Under the Bootstrap documentation is states that jQuery is required for bootstrap javascript features: http://getbootstrap.com/getting-started/#whats-included
Also, your function is being using jQuery notation.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.