Question

我正在使用引导标签来组织网站的课程（http://goo.gl/AEgyEc）

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

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

Answer 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>

也许它会帮助某些人;）

Answer 2

如果你使用bootstrap内容，你应该这样做，不需要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>

具有锚定行为的Bootstrap选项卡

2 个答案: