Geek Answers Handbook

How to return content to two separate tabbable identifiers on the same tab by clicking the Twitter Bootstrap Tabbable Tabs button in a Rails 3.2 application

Using Twitter Bootstrap bootstrap-tab.js, I have:

<ul class="tabnavcenter" id="myTab"> <li class="active"><a href="#home" data-toggle="tab">about</a></li> <li><a href="#tab2" data-toggle="tab">education</a></li> <li><a href="#tab3" data-toggle="tab">experience</a></li> <li><a href="#tab4" data-toggle="tab">verified skills</a></li> <li><a href="#tab5" data-toggle="tab"> video</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">Content 1</div> <div class="tab-pane" id="profile">...</div> <div class="tab-pane" id="messages">...</div> <div class="tab-pane" id="settings">...</div> </div>

How can I get it if I put:

  <div class="tab-content"> <div class="tab-pane active" id="home">Content 2</div> </div>

... two places in the profile (once above and once below navbar) and with different contents in each, will this work? At the moment, the content appears, but after clicking it, it disappears. Can there be two "active" li at the same time?

Edit:

Since I use this in a Rails 3.2 application, I currently have the following in bootstrap-tab.js:

  $('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); }) $('#myTab a[href="#home"]').tab('show'); $('#myTab a[href="#tab2"]').tab('show'); $('#myTab a[href="#tab3"]').tab('show'); $('#myTab a[href="#tab4"]').tab('show'); $('#myTab a[href="#tab5"]').tab('show'); $('#myTab a[href="#home2"]').tab('show'); $('#myTab a[href="#tab22"]').tab('show');

and after placing the following in user_body.html.erb:

  <script type="text/javascript"> $(function () { $('#myTab >li>a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); // $(this.getAttribute('href') + '2').html($(this).html()); }); });

... I get the second content in the div after refreshing the page, unchanged when I click on the second tab, and then change the name to the first "a" when I click on the first one.

This is a mess.

+7
source share
4 answers

Here is one solution without additional javascript and is compatible with the plugins API.

The principle is to use 2 .tab-content and use the data-target selector attribute.

HTML

The first .tab-content contains your regular .tab-pane

 <div class="tab-content"> <div class="tab-pane active" id="home">home</div> <div class="tab-pane home-tab">class home</div> <div class="tab-pane profile-tab">profile</div> <div class="tab-pane messages-tab">messages</div> <div class="tab-pane settings-tab">settings</div> </div>

and the second .tab-content contains additional .tab-pane which are optionnal - plus empty ( #notab_else here)

 <div class="tab-content"> <div class="tab-pane active" id="home_else">home_else</div> <div class="tab-pane home-tab">class home</div> <div class="tab-pane profile-tab messages-tab settings-tab" id="notab_else"></div> </div>

Then you have tabs with one additional attribute, data-target :

 <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home" data-target="#home, #home_else">Home</a></li> <li class=""><a href="#home" data-target=".home-tab">Class Home</a></li> <li><a href="#profile" data-target=".profile-tab">Profile</a></li> <li><a href="#messages" data-target=".messages-tab">Messages</a></li> <li><a href="#settings" data-target=".settings-tab">Settings</a></li> </ul>

This data-target attribute defines the associated .tab-pane (s). The magic is that you can use #id or .class es or any valid jQuery selector.

Javascript

All you need to activate is the default code:

 $('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); });

And you can also use your own actions to launch tabs defined by the API.

You do not need to if you keep the default behavior for tabs.

 $('#myTab a:first').tab('show');

EXTRA

  • You can be free of any javascript if you set data-toggle="tab" to a elements
  • A fade effect is available if you add the fade class to .tab-pane (and fade in for .active )

DEMONSTRATIONS

Here is a demo (jsfiddle) and a demo with optional (jsfiddle)

+18
source

you can only access one id at a time, which is why it is called id.

Get the content from the first and apply it to the second.

 $('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); $(this.href +'2').html($(this.href).html() }) <div class="tab-content"> <div class="tab-pane active" id="home">Content 1</div> </div> <div class="tab-content2"> <div class="tab-pane active" id="home2">Content 2</div> </div>
+2
source

Here is a working solution for your problem (updated):

 <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">Tab-1</div> <div class="tab-pane" id="profile">Tab-2</div> </div> <div class="tab-content" id="tab-content2"> <div class="tab-pane active" id="home2">Home Content 2</div> <div class="tab-pane" id="profile2">Profile Tab-2</div> </div> <script type="text/javascript"> $(document).ready(function() { $("#tab-content2 div").each(function(i, e){ if(!$(e).hasClass('active')) $(e).hide(); }); $('#myTab>li>a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); $("#tab-content2 div").each(function(i, e) { $(e).hide(); }); $(this.getAttribute('href') + "2").show(); }); }); </script>
+2
source 
  <script type="text/javascript"> $(function () { $('#myTab >li>a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); // $('#extendedView').html($(this).html()); }); }); </script> <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile</a></li> <li><a href="#messages">Messages</a></li> <li><a href="#settings">Settings</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">Tab-1</div> <div class="tab-pane" id="profile">Tab-2</div> <div class="tab-pane" id="messages">Tab-3</div> <div class="tab-pane" id="settings">Tab-4</div> </div> <div class="tab-content2"> <div class="tab-pane active" id="extendedView">Content 2</div>

OR

 <script type="text/javascript"> $(function () { $('#myTab >li>a').on('click', function (e) { e.preventDefault(); $(this).tab('show'); // $(this.getAttribute('href') + '2').html($(this).html()); }); }); </script> <ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile</a></li> <li><a href="#messages">Messages</a></li> <li><a href="#settings">Settings</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="home">Tab-1</div> <div class="tab-pane" id="profile">Tab-2</div> <div class="tab-pane" id="messages">Tab-3</div> <div class="tab-pane" id="settings">Tab-4</div> </div> <div class="tab-content2"> <div class="tab-pane active" id="home2"></div> <div class="tab-pane" id="profile2"></div> <div class="tab-pane" id="messages2"></div> <div class="tab-pane" id="settings2"></div> </div>
0
source

More articles:


All Articles