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?