Anchor links for accordion menu not working (Bootstrap 3)

问题

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

回答1:

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!

来源：https://stackoverflow.com/questions/31397311/anchor-links-for-accordion-menu-not-working-bootstrap-3

标签

html

twitter-bootstrap

accordion