Question

我的引导页面上有一个手风琴菜单，我试图在文本中包含链接，这些链接会将读者带到同一页面上的锚点，但是在菜单的不同选项卡中（这样它们不必向下滚动并单击选项卡）。它只适用于第一个选项卡。我究竟做错了什么？这是我的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 show”方法绑定，如下所示，

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

这将选择给定的标签并显示其关联的内容。任何之前选择的其他选项卡将被取消选中关联的内容是隐藏的。

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

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

希望这有帮助！

手风琴菜单不起作用的锚点链接（Bootstrap 3）

1 个答案: