0

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>

JSFIDDLE

Where am i wrong? How can i fix it?

Elham Gdz
  • 1,015
  • 3
  • 15
  • 31

2 Answers2

2

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' .

Community
  • 1
  • 1
azeós
  • 4,853
  • 4
  • 21
  • 40
  • i remove active class from all of tab except the first one.it likes work correctly without any js , do you think it is ok or i add js for it? – Elham Gdz Feb 02 '14 at 08:53
  • You don't need any JS. That script what it does, is to open the corresponding tab on page load. Suppose you enter in your URL bar `http://yoursite.com/mypage#fav`, then the `fav-tab` will get opened. That doesn't happen by default. – azeós Feb 02 '14 at 08:56
0

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.

Andrew
  • 5,525
  • 5
  • 36
  • 40
  • yes it is show but when i click favoriets it is show another content, not it's content – Elham Gdz Feb 02 '14 at 08:27
  • What content does is shown when you click 'favoriets'? For me it displays content 'My favoriets' – Andrew Feb 02 '14 at 08:32
  • sometimes it is confused and show content of previous tab that i click on it. – Elham Gdz Feb 02 '14 at 08:34
  • Try removing your custom javascript function. Bootstrap will take care of the switching of tabs by itself. Could be that your function is attempting to switch tabs as well as bootstrap. – Andrew Feb 02 '14 at 08:38
  • it is not work. in JSFIDDL this problem is Available. – Elham Gdz Feb 02 '14 at 08:47