手风琴菜单的锚链接不起作用 (Bootstrap 3)

Question

我的 bootstrap 页面上有一个手风琴菜单，我试图在文本中包含链接，这些链接会将 reader 带到同一页面上的锚点，但在不同的页面中菜单的选项卡（这样他们就不必向下滚动并单击选项卡）。它只适用于第一个选项卡。我究竟做错了什么？这是我的 JS fiddle （抱歉代码中的拼写错误！它们不是我的...）

代码如下：

<p>Go to <a href="#Tab1">Tab1</a>.</p>
<p>Go to <a href="#Tab2">Tab2</a>.</p>
<p>Go to <a href="#Tab3">Tab3</a>.</p>

<section id="content">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 wow fadeInDown">
               <div class="tab-wrap"> 
                    <div class="media">
                        <div class="parrent pull-left">
                            <ul class="nav nav-tabs nav-stacked">
                                <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01"><i class="fa fa-comments"></i>Tab1</a></li>
                                <li class=""><a href="#tab2" data-toggle="tab" class="tehnical"><i class="fa fa-pencil-square-o"></i>Tab2</a></li>
                                <li class=""><a href="#tab3" data-toggle="tab" class="tehnical"><i class="fa fa-check-square-o"></i>Tab3</a></li>                                   
                            </ul>
                        </div>

                        <div class="parrent media-body">
                            <div class="tab-content">

                                <div class="tab-pane fade active in" id="tab1">
                                    <div class="media">
                                       <div class="pull-left">
                                           <img class="img-responsive" src="images/services/tab1-1.png">
                                           <br>
                                           <img class="img-responsive" src="images/services/tab1-2.png">
                                           <br>
                                           <img class="img-responsive" src="images/services/tab1-3.png">
                                        </div>
                                        <div class="media-body">
                                            <a name="Tab1"></a>
                                            <h2>Tab1</h2>
                                            <p>Tab1Tab1Tab1.</p>                         
                                        </div>
                                    </div>
                                </div>

                                 <div class="tab-pane fade" id="tab2">
                                    <div class="media">
                                       <div class="pull-left">
                                           <img class="img-responsive" src="images/services/tab2.jpg">
                                        </div>
                                        <div class="media-body">
                                            <a name="Tab2"></a>
                                           <h2>Tab2</h2>                                                <p>Tab2Tab2Tab2.</p>                                                                                             </div>
                                    </div>
                                 </div>

                                 <div class="tab-pane fade" id="tab3">
                                     <div class="media">
                                         <div class="pull-left">
                                             <img class="img-responsive" src="images/services/tab3.jpg">
                                         </div>
                                         <div class="media-body">
                                             <a name="Tab3"></a>
                                             <h2>Tab3</h2>
                                             <p>Tab3Tab3Tab3 </p>

                                         </div>
                                     </div>
                                 </div>
                             </div> <!--/.tab-content-->  
                        </div> <!--/.media-body--> 
                    </div> <!--/.media-->     
                </div><!--/.tab-wrap-->               
            </div><!--/.col-sm-6-->
        </div><!--/.row-->
    </div><!--/.container-->

Answer 1

我建议您在 http://getbootstrap.com/javascript/#tabs

上详细阅读 Twitter Bootstrap 关于 "Tab Methods" 的文档

通过简单地锚定链接各个选项卡只会将您带到第一个选项卡或当前活动的选项卡，因为所有其他选项卡内容都是自然隐藏的。

您正在寻找的解决方案可能需要您的链接与 "tab show" 方法绑定，如下所示，

$('#someTab').tab('show')

This selects the given tab and shows its associated content. Any other tab that was previously selected becomes unselected and its associated content is hidden.

我假设您还包含 bootstrap.min.js 以确保这些方法可用。

编辑： 我在这里为您创建了一个演示 http://jsfiddle.net/trj87ytj/34/

希望对您有所帮助！

手风琴菜单的锚链接不起作用 (Bootstrap 3)

Anchor links for accordion menu not working (Bootstrap 3)

html

accordion

twitter-bootstrap