javascript - Twitter Bootstrap 标签 : How to jump to anchor?

Question

我希望页面在单击“查看详细信息”按钮时跳转到“tabreveal”ID。我需要什么 JS 才能做到这一点？代码如下:

  <div class="row">
    <div class="span3 box1">
      <h2>Web</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#web" data-toggle="tab">View details &raquo;</a></p>
    </div>
    <div class="span3 box2">
      <h2>Video</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#video" data-toggle="tab">View details &raquo;</a></p>
   </div>
    <div class="span3 box3">
      <h2>Print</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn" href="#print" data-toggle="tab">View details &raquo;</a></p>
    </div>
  </div>
  <div class="tab-content" id="tabreveal">
    <div class="tab-pane" id="web">2</div>
    <div class="tab-pane" id="video">3</div>
    <div class="tab-pane" id="print">4</div>
  </div>

提前感谢您的任何回复!

Answer 1

选项卡数据 API 使用 preventDefault()，这就是浏览器不滚动到 Pane 的原因。 ( See source code. )

最简单的做法可能是禁用 Tab 代码中定义的事件监听器，然后在不调用 preventDefault() 的情况下创建自己的事件监听器。

类似于:

// disable old listener
$('body').off('click.tab.data-api')

// attach new listener
$('body').on('click.scrolling-tabs', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
  //e.preventDefault()
  $(this).tab('show')
})

如果您只希望某些选项卡触发浏览器滚动，您可以在此处添加一些条件语句来控制是否调用 preventDefault()。

最后，确保这些覆盖在选项卡插件加载后运行。

---

有条件的视口(viewport)

如果你想检查视口(viewport)并根据其宽度决定是否滚动，你可以尝试:

$('body').on('click.scrolling-tabs', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
  $(window).width() > 767 && e.preventDefault()
  $(this).tab('show')
})

在 Bootstrap 中，767 像素 被认为是“手机”视口(viewport)的上限，但您可以使用任何您喜欢的值。