Twitter Bootstrap 标签页：如何跳转到锚点？

Question

Twitter Bootstrap 标签页：如何跳转到锚点？

3

当点击“查看详情”按钮时，我希望页面跳转到“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>

感谢您提前回复！

- toddlikesdesign

在您的帖子中添加页面链接将有很大帮助！ - Jamund Ferguson

2个回答

0

您可以在不需要任何JavaScript代码的情况下实现此操作，您只需在正确的位置添加锚点名称即可，例如：

<div class="tab-content" id="tabreveal">
    <a name="web"></a><div class="tab-pane" id="web">2</div>
    <a name="video"></a><div class="tab-pane" id="video">3</div>
    <a name="print"></a><div class="tab-pane" id="print">4</div>
</div>

在添加锚点之后，您的链接（#web、#video、#print）将跳转到正确的位置。

- udidu

谢谢你的建议，但我已经尝试过了，没有成功，这就是为什么我认为需要一些JS参与的原因。请查看http://mobilityhosting.com/html5testsite/。 - toddlikesdesign

1

-1 不需要使用带有“name”属性的锚点；在所有现代浏览器中，使用“id”即可正常工作，而且 OP 已经在示例中提供了有效的 HTML 以触发浏览器滚动。问题出在 JS 和 Twitter Bootstrap 上，这已经被 OP 正确标记了。 - merv

+1。这个答案很有用。虽然没有直接回答问题的具体细节，但是这个答案提供了一种许多新开发人员可能不知道的替代方案。TIMTOWTDI，新并不意味着更好，而且了解更多也没有错。 - pcronin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- merv · Accepted Answer

Tab数据API使用preventDefault()，这就是为什么浏览器不会滚动到选项卡面板的原因。(查看源代码)

最简单的方法可能是禁用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()。

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

视口条件

如果您想检查视口并根据其宽度决定是否滚动，可以尝试以下方法：

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

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