2

当单击查看详细信息按钮时，我希望页面跳转到“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>

提前感谢您的任何回复！

4

2 回答 2

4

Tab Data 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 像素被认为是“电话”视口的上限，但您可以使用任何您喜欢的值。

于 2012-08-21T05:46:57.020 回答
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) 将跳转到正确的位置。

于 2012-08-20T22:53:38.617 回答