Fix tabs by using new classes

diff --git a/docs/components/navs.md b/docs/components/navs.md
index 7ac1b52324a7614cba312a3c0910dec2ec34f4e4..2db4f4703b6eb65d01c0fcb355c8f11d247051c5 100644 (file)
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -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>

diff --git a/js/src/tab.js b/js/src/tab.js
index e7e8f550f0d29036c905481d5781cb7ea5e0cdea..c7e5fbfbe992d38d1042d2abc14f09d2f7c1df15 100644 (file)
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -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)
       }