rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00
Code Issues Actions Packages Releases Activity

Fix tabs by using new classes

Browse Source
This commit is contained in:
Starsam80 2016-10-27 16:50:23 -06:00
parent bf39bb3ac3
commit d991c868a4
No known key found for this signature in database
GPG Key ID: 4E48BB48BA7E9026
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/components/navs.md
View File

@ -321,7 +321,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
<div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledBy="home-tab">
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledBy="profile-tab">
@ -390,11 +390,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
### Fade effect
To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.in` to make the initial content visible.
To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible.
{% highlight html %}
<div class="tab-content">
<div class="tab-pane fade in active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>

6
js/src/tab.js
View File

@ -37,7 +37,7 @@ const Tab = (($) => {
DROPDOWN_MENU : 'dropdown-menu',
ACTIVE : 'active',
FADE : 'fade',
IN : 'in'
SHOW : 'show'
}
const Selector = {
@ -173,7 +173,7 @@ const Tab = (($) => {
}
if (active) {
$(active).removeClass(ClassName.IN)
$(active).removeClass(ClassName.SHOW)
}
}
@ -197,7 +197,7 @@ const Tab = (($) => {
if (isTransitioning) {
Util.reflow(element)
$(element).addClass(ClassName.IN)
$(element).addClass(ClassName.SHOW)
} else {
$(element).removeClass(ClassName.FADE)
}