Question

我非常熟悉锚链接以及它们的工作原理。但是，我有一个在一个页面上使用选项卡的站点。有五个选项卡，当我尝试直接链接到第二个，第三个，第四个或第五个选项卡时，它只会进入除Safari之外的每个浏览器中的第一个选项卡。

以下是选项卡列表中的代码：

<ul class="nav nav-tabs">
 <li class="active"><a data-toggle="tab" href="#football">Football</a></li>
 <li><a data-toggle="tab" href="#mbball">Men&#39;s Basketball</a></li>
 <li><a data-toggle="tab" href="#wbball">Women&#39;s Basketball</a></li>
 <li><a data-toggle="tab" href="#baseball">Baseball</a></li>
 <li><a data-toggle="tab" href="#vs">Varsity Sports</a></li>
</ul>

然后是锚点部分：

<div class="tab-pane fade in active" id="football">
 <div class="row">
  <div class="col-md-4">
  </div>
 </div>
</div>

我找到了一个使用标签的不同网站，他们可以在每个浏览器中直接链接，但代码看起来完全相同。

<ul class="rtabs">
 <li><a href="#football">Football</a></li>
 <li><a href="#mbb">Men's Basketball</a></li>
 <li><a href="#wbb">Women's Basketball</a></li>
 <li><a href="#base">Baseball</a></li>
 <li><a href="#soc-vb">Soccer & Volleyball</a></li>
 <li><a href="#shows">Coaches Radio Shows</a></li>
</ul>

<div id="football">

非常感谢任何帮助！

Answer 1

从它的外观来看，你正在使用twitter bootstrap。

bootstrap中tab的重要组成部分是每个链接href =＆＃34; #id＆＃34;是您在单击时激活的选项卡面板的ID。每个锚标签必须具有属性data-toggle =＆＃34; tab＆＃34;所以bootstraps javascript知道如何处理点击。

第二部分很难说，因为你只包括部分代码是div＆＃34; tab-pane＆＃34;必须有一个包含＆＃34; tab-content＆＃34;

类的父包装器

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#football">Football</a>

    </li>
    <li><a data-toggle="tab" href="#mbball">Men&#39;s Basketball</a>

    </li>
    <li><a data-toggle="tab" href="#wbball">Women&#39;s Basketball</a>

    </li>
    <li><a data-toggle="tab" href="#baseball">Baseball</a>

    </li>
    <li><a data-toggle="tab" href="#vs">Varsity Sports</a>

    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade in active" id="football">
         <h3>Football</h3>

    </div>
    <div class="tab-pane fade in" id="mbball">
         <h3>Men's Basketball</h3>

    </div>
    <div class="tab-pane fade in" id="wbball">
         <h3>Women's Basketball</h3>

    </div>
    <div class="tab-pane fade in" id="baseball">
         <h3>Baseball</h3>

    </div>
    <div class="tab-pane fade in" id="vs">
         <h3>Vasity</h3>

    </div>
</div>
<hr/>

这里的工作示例......

http://jsfiddle.net/SeanWessell/w71urt1v/

标签锚链接无法正常工作

1 个答案: