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

Tab Data API使用preventDefault()，这就是浏览器无法滚动到窗格的原因。（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()。

最后，确保在加载了标签插件后，这些覆盖会运行。

视口条件

如果要检查视口并决定是否根据宽度滚动，可以尝试：

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

在Bootstrap中， 767 px 被视为“手机”视口的上限，但您可以使用您想要的任何值。

Answer 2

您可以在没有任何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）将跳转到正确的位置。

Twitter Bootstrap选项卡：如何跳转到锚点？

2 个答案:

视口条件