html - Anchor links for accordion menu not working (Bootstrap 3) -


i have accordion menu on bootstrap page, , i'm trying include links in text take reader anchor on same page, within different tabs of menu (so don't have scroll down , click on tabs). works first tab though. doing wrong? here's js fiddle (sorry typos in code! weren't mine...)

and here's code:

<p>go <a href="#tab1">tab1</a>.</p> <p>go <a href="#tab2">tab2</a>.</p> <p>go <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 take detailed read on twitter bootstrap's documentation on "tab methods" @ http://getbootstrap.com/javascript/#tabs

by anchor linking individual tabs first tab or active tab since other tab contents hidden nature.

the solution seeking need links bind "tab show" method follows,

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

this selects given tab , shows associated content. other tab selected becomes unselected , associated content hidden.

i assume have bootstrap.min.js included ensure methods available.

edit: i have created demo here you http://jsfiddle.net/trj87ytj/34/

hope helps!


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

jquery - javascript onscroll fade same class but with different div -

i new @ javascript , want learn new. there wrong code : why div fades @ same time. i want ask how fade different div s same class name.can me , explain me. thanks in advance. javascript: $(window).scroll(function(){ if ($( "div.fade" ).offset().top - $(window).scrolltop() <= 100){ $('.fade').addclass( "fade-in"); } else { $('.fade').removeclass("fade-in"); } }); here jsfiddle onscroll = function () { var scrolltop = $(this).scrolltop() ; $("div.fade").each(function(){ if(($(this).offset().top - scrolltop) <= 100){ $(this).toggleclass("fade-in"); } }) }
Read more