手风琴菜单不起作用的锚链接（引导程序3） [英] Anchor links for accordion menu not working (Bootstrap 3)

问题描述

我的引导页面上有一个手风琴菜单，我正在尝试在文本中包含链接，以便将读者锁定在同一页面上，但是在菜单的不同选项卡中（这样，不得不向下滚动并点击标签）。它只适用于第一个标签。我究竟做错了什么？
这是我的上的标签方法

通过简单的锚点链接，各个标签只会将您带到第一个标签或当前活动标签，因为所有其他标签内容都被大自然隐藏。

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

 <$ c $ （'show'）
  

这会选择给定的选项卡并显示其关联的内容。任何以前选择的
其他选项卡将被取消选中，并且其关联
的内容将被隐藏。

我假设你还包含以确保这些方法可用。

编辑： 我已为您创建演示 http://jsfiddle.net/trj87ytj/34/

希望这有助于您！

I have an accordion menu on my bootstrap page, and I'm trying to include links in a text that will take the reader to an anchor on the same page, but within different tabs of the menu (so that they don't have to scroll down and click on the tabs). It only works for the first tab though. What am I doing wrong? Here's my JS fiddle (sorry for the typos in the code! They weren't mine...)

And here's the code:

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

解决方案

I suggest you take a detailed read over Twitter Bootstrap's documentation on "Tab Methods" at http://getbootstrap.com/javascript/#tabs

By simply anchor linking the individual tabs will only get you to the first tab or the currently active tab since all other tab contents are hidden by nature.

The solution you are seeking would probably need your links to bind with the "tab show" method as follows,

$('#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.

I assume you also have bootstrap.min.js included to ensure those methods are available.

Edit: I have created a demo here for you http://jsfiddle.net/trj87ytj/34/

Hope this helps!

这篇关于手风琴菜单不起作用的锚链接（引导程序3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！