具有锚行为的引导选项卡答案

【问题标题】：Bootstrap tabs with anchor behavior具有锚行为的引导选项卡
【发布时间】：2014-07-14 19:19:04
【问题描述】：

我正在使用引导选项卡来组织网站的课程 (http://goo.gl/AEgyEc)

<nav class="nav-courses"> 作品分为 3 个标签“本科课程”、“研究生课程”和“扩展课程”。这些链接具有与<ul id="#menu-courses"> 相同的功能，激活襟翼。

但是，除了激活之外，站点还必须滚动到锚点的 id。例如，单击本科课程应滚动到锚点#tab-graduation。但是，此行为仅在选项卡已处于活动状态（双击）时有效。有什么方法可以激活和滚动吗？

【问题讨论】：

标签： twitter-bootstrap scroll tabs anchor

【解决方案1】：

我使用下面的代码解决了这个问题：

<ul>
<li><a href="#tab-graduation" onClick="jQuery('.nav-tabs a[href=#tab-graduation]').tab('show')">Cursos Graduação</a></li>
<li><a href="#tab-graduate" onClick="jQuery('.nav-tabs a[href=#tab-graduate]').tab('show')">Cursos Pós-graduação</a></li>
<li><a href="#tab-extension" onClick="jQuery('.nav-tabs a[href=#tab-extension]').tab('show')">Cursos Extensão</a></li>
</ul>

也许它会对某人有所帮助；）

【讨论】：

【解决方案2】：

如果您使用引导内容，您应该这样做，不需要 onclick。只有单击右侧选项卡才能看到内容。

<ul class="nav nav-tabs" style="margin-bottom: 15px;">
   <li><a href="#graduation" data-toggle="tab">graduation</a></li>
   <li><a href="#graduate" data-toggle="tab">graduate</a></li>
   <li><a href="#extension" data-toggle="tab">extension</a></li>
</ul>   
<div class="tab-content" id="TabContent">
   <div class="tab-pane fade" id="graduation">
      <p>
         graduation content
      </p>
   </div>      
   <div class="tab-pane fade" id="graduate">
      <p>
         graduate
      </p>
    </div>
    <div class="tab-pane fade" id="extension">
       <p>
          extension
       </p>
    </div>
</div>

【讨论】：