rewrite tab with new active shit

2 files changed, 28 insertions, 28 deletions

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 85d9f67a2..1eed75e90 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -191,26 +191,26 @@ $(function () {
   QUnit.test('selected tab should have aria-expanded', function (assert) {
     assert.expect(8)
     var tabsHTML = '<ul class="nav nav-tabs">'
-        + '<li class="active"><a href="#home" toggle="tab" aria-expanded="true">Home</a></li>'
-        + '<li><a href="#profile" toggle="tab" aria-expanded="false">Profile</a></li>'
+        + '<li><a class="nav-item active" href="#home" toggle="tab" aria-expanded="true">Home</a></li>'
+        + '<li><a class="nav-item" href="#profile" toggle="tab" aria-expanded="false">Profile</a></li>'
         + '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 
     $tabs.find('li:first a').bootstrapTab('show')
-    assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
-    assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
+    assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
+    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
 
     $tabs.find('li:last a').trigger('click')
-    assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'after click, shown tab has aria-expanded = true')
-    assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'after click, hidden tab has aria-expanded = false')
+    assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'after click, shown tab has aria-expanded = true')
+    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'after click, hidden tab has aria-expanded = false')
 
     $tabs.find('li:first a').bootstrapTab('show')
-    assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
-    assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
+    assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
+    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
 
     $tabs.find('li:first a').trigger('click')
-    assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'after second show event, shown tab still has aria-expanded = true')
-    assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false')
+    assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'after second show event, shown tab still has aria-expanded = true')
+    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false')
   })
 
 })
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index ff6685fed..22a918ed7 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -35,14 +35,14 @@
   <h4>Tabs without fade</h4>
 
   <ul id="myTab" class="nav nav-tabs">
-    <li class="active nav-item"><a href="#home" class="nav-link" data-toggle="tab">Home</a></li>
+    <li class="nav-item"><a href="#home" class="nav-link active" data-toggle="tab">Home</a></li>
     <li class="nav-item"><a href="#profile" data-toggle="tab" class="nav-link">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop1" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
-        <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
+        <a class="dropdown-item" href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent" class="tab-content">
@@ -67,14 +67,14 @@
   <h4>Tabs with fade</h4>
 
   <ul id="myTab1" class="nav nav-tabs">
-    <li class="active nav-item"><a class="nav-link" href="#home1" data-toggle="tab">Home</a></li>
+    <li class="nav-item"><a class="nav-link active" href="#home1" data-toggle="tab">Home</a></li>
     <li class="nav-item"><a class="nav-link" href="#profile1" data-toggle="tab">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop2" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
-        <li><a href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
+        <a class="dropdown-item" href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent1" class="tab-content">
@@ -103,10 +103,10 @@
     <li class="nav-item"><a class="nav-link" href="#profile2" data-toggle="tab">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop3" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3">
-        <li><a href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3">
+        <a class="dropdown-item" href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent2" class="tab-content">
@@ -135,10 +135,10 @@
     <li class="nav-item"><a class="nav-link" href="#profile3" data-toggle="tab">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop4" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4">
-        <li><a href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4">
+        <a class="dropdown-item" href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent3" class="tab-content">