Question

我正在尝试通过外部链接访问引导标签...例如：http://example.org/folder#First使用下面的脚本时似乎没有任何结果。单击http://example.org/folder#First时，应该将用户带到该选项卡并打开它。

<div id="tabmenu_top" class="row">
    <div class="row">
        <div style="display: table; margin: 0 auto;">
            <ul class="nav nav-tabs center-block" id="sync">
                <li><a data-toggle="tab" href="/#First">Tab 1</a></li>
                <li><a data-toggle="tab" href="/#Second">Tab 2</a></li>
            </ul>
        </div>
    </div>
</div>

$(document).on('[data-toggle="tab"]', function (e) {
    e.preventDefault()
    $('a[href="' + $(this).attr('href') + '"]').tab('show');
});

Answer 1

当dom准备就绪时你需要选择所需的标签，而你不需要href中的正斜杠。完成后，您可以使用window.location.hash从网址获取哈希值，这将分别返回#First和#Second。然后，您可以使用结果值来选择选项卡。

完整的Html：

<div id="tabmenu_top" class="row">
  <div class="row">
    <div style="display: table; margin: 0 auto;">
      <ul class="nav nav-tabs center-block" id="sync">
        <li><a data-toggle="tab" href="#First">Tab 1</a></li>
        <li><a data-toggle="tab" href="#Second">Tab 2</a></li>
      </ul>
    </div>
  </div>
</div>
<div class="tab-content">
  <div class="tab-pane fade active" id="First">
    <h2>Green</h2>
    <img src="https://placehold.it/350x150/00ff00"/>
  </div>
  <div class="tab-pane fade" id="Second">
    <h2>Red</h2>
    <img src="https://placehold.it/350x150/ff0000"/>
  </div>
</div>

<强> jQuery的：

请参阅评论以获得解释

 $(function() {
   //Just for demonstration purposes, I've hard-coded the hash value.
   var hash = "#Second"; //You would use window.location.hash here
   if (hash) {
     $('.nav-tabs a[href="' + hash + '"]').tab('show');
   }
 });

<强> Fiddle Demo

Bootstrap选项卡为选项卡创建外部链接

1 个答案: