jquery停止制表符更改url答案

【问题标题】：jquery stop tabs from changing urljquery停止制表符更改url
【发布时间】：2013-09-16 15:43:46
【问题描述】：

我使用 twitter bootstrap 来显示标签。当一个标签被称为 url 应该从：

example.com/controller

到

example.com/controller#tabid

但在我的代码中，除非我删除 jquery，否则它不会发生。为什么 jquery 会阻止 url 被更改？

这是我的代码： 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>

【问题讨论】：

bootstrap.js 需要 jquery。我认为您看到的行为是预期的行为
也许你是对的。单击选项卡时 URL 不会更改。这是我没想到的。
据我所知，您更喜欢导航栏
我只是想模仿这个：getbootstrap.com/javascript/#tabs
在这个例子中，你在哪里看到用哈希更新的 URL？我确定锚标签只是阻止了它们的默认行为，你可以覆盖处理程序

标签： jquery twitter-bootstrap tabs twitter-bootstrap-3

【解决方案1】：

您仍然可以设置自己的点击处理程序：

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

【讨论】：