CODEWITHSUNDEEP
jquerytwitter-bootstraptabstwitter-bootstrap-3
werva
werva

Reputation: 1639

jquery stop tabs from changing url

I use twitter bootstrap to show tabs. when a tab is called url should change from:

example.com/controller

to 

example.com/controller#tabid

but in my code it does not happen unless I remove jquery. why does jquery stop url from being changed?

this is my code: http://jsbin.com/oraFITI/1/edit

<html>
  <head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <link type="text/css" rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
    <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
  </head>
<body>

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#about">About</a>
    </li>
    <li class="">
        <a data-toggle="tab" href="#profile">profile</a>
    </li>
    <li class="">
        <a data-toggle="tab" href="#store">store</a>
    </li>
        <li class="">
            <a data-toggle="tab" href="#favorite">Favorite</a>
    </li>   
</ul>

<div class="tab-content" id="content">
  <div id="about" class="tab-pane active">about content</div>
  <div id="profile" class="tab-pane">profile content</div>
  <div id="store" class="tab-pane">store content</div>
  <div id="favorite" class="tab-pane">favorite content</div>
</div>

</body>
</html>

Upvotes: 2

Views: 3276

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You can still set your own click handler:

$('.nav-tabs a').on('click',function(){ window.location.hash = $(this).attr('href'); });

Upvotes: 2

Related Questions