diff --git a/js/dist/tab.js b/js/dist/tab.js
index 33c228058..8b175ea48 100644
--- a/js/dist/tab.js
+++ b/js/dist/tab.js
@@ -45,13 +45,14 @@ var Tab = (function ($) {
   var Selector = {
     A: 'a',
     LI: 'li',
-    LI_DROPDOWN: 'li.dropdown',
+    DROPDOWN: '.dropdown',
     UL: 'ul:not(.dropdown-menu)',
-    FADE_CHILD: '> .fade',
+    FADE_CHILD: '> .nav-item .fade, > .fade',
     ACTIVE: '.active',
-    ACTIVE_CHILD: '> .active',
+    ACTIVE_CHILD: '> .nav-item > .active, > .active',
     DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"]',
-    DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu > .active'
+    DROPDOWN_TOGGLE: '.dropdown-toggle',
+    DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
   };
 
   /**
@@ -83,7 +84,7 @@ var Tab = (function ($) {
       value: function show() {
         var _this = this;
 
-        if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).parent().hasClass(ClassName.ACTIVE)) {
+        if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).hasClass(ClassName.ACTIVE)) {
           return;
         }
 
@@ -95,10 +96,6 @@ var Tab = (function ($) {
         if (ulElement) {
           previous = $.makeArray($(ulElement).find(Selector.ACTIVE));
           previous = previous[previous.length - 1];
-
-          if (previous) {
-            previous = $(previous).find(Selector.A)[0];
-          }
         }
 
         var hideEvent = $.Event(Event.HIDE, {
@@ -123,7 +120,7 @@ var Tab = (function ($) {
           target = $(selector)[0];
         }
 
-        this._activate($(this._element).closest(Selector.LI)[0], ulElement);
+        this._activate(this._element, ulElement);
 
         var complete = function complete() {
           var hiddenEvent = $.Event(Event.HIDDEN, {
@@ -178,22 +175,16 @@ var Tab = (function ($) {
           $(active).removeClass(ClassName.ACTIVE);
 
           var dropdownChild = $(active).find(Selector.DROPDOWN_ACTIVE_CHILD)[0];
+
           if (dropdownChild) {
             $(dropdownChild).removeClass(ClassName.ACTIVE);
           }
 
-          var activeToggle = $(active).find(Selector.DATA_TOGGLE)[0];
-          if (activeToggle) {
-            activeToggle.setAttribute('aria-expanded', false);
-          }
+          active.setAttribute('aria-expanded', false);
         }
 
         $(element).addClass(ClassName.ACTIVE);
-
-        var elementToggle = $(element).find(Selector.DATA_TOGGLE)[0];
-        if (elementToggle) {
-          elementToggle.setAttribute('aria-expanded', true);
-        }
+        element.setAttribute('aria-expanded', true);
 
         if (isTransitioning) {
           Util.reflow(element);
@@ -204,15 +195,12 @@ var Tab = (function ($) {
 
         if (element.parentNode && $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
 
-          var dropdownElement = $(element).closest(Selector.LI_DROPDOWN)[0];
+          var dropdownElement = $(element).closest(Selector.DROPDOWN)[0];
           if (dropdownElement) {
-            $(dropdownElement).addClass(ClassName.ACTIVE);
+            $(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
           }
 
-          elementToggle = $(element).find(Selector.DATA_TOGGLE)[0];
-          if (elementToggle) {
-            elementToggle.setAttribute('aria-expanded', true);
-          }
+          element.setAttribute('aria-expanded', true);
         }
 
         if (callback) {
diff --git a/js/dist/tab.js.map b/js/dist/tab.js.map
index 58eeccb93..e76463c68 100644
Binary files a/js/dist/tab.js.map and b/js/dist/tab.js.map differ
diff --git a/js/src/tab.js b/js/src/tab.js
index 9d793417a..4b311c24e 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -43,13 +43,14 @@ const Tab = (($) => {
   const Selector = {
     A                     : 'a',
     LI                    : 'li',
-    LI_DROPDOWN           : 'li.dropdown',
+    DROPDOWN              : '.dropdown',
     UL                    : 'ul:not(.dropdown-menu)',
-    FADE_CHILD            : '> .fade',
+    FADE_CHILD            : '> .nav-item .fade, > .fade',
     ACTIVE                : '.active',
-    ACTIVE_CHILD          : '> .active',
+    ACTIVE_CHILD          : '> .nav-item > .active, > .active',
     DATA_TOGGLE           : '[data-toggle="tab"], [data-toggle="pill"]',
-    DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu > .active'
+    DROPDOWN_TOGGLE       : '.dropdown-toggle',
+    DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
   }
 
 
@@ -78,7 +79,7 @@ const Tab = (($) => {
     show() {
       if (this._element.parentNode &&
          (this._element.parentNode.nodeType === Node.ELEMENT_NODE) &&
-         ($(this._element).parent().hasClass(ClassName.ACTIVE))) {
+         ($(this._element).hasClass(ClassName.ACTIVE))) {
         return
       }
 
@@ -90,10 +91,6 @@ const Tab = (($) => {
       if (ulElement) {
         previous = $.makeArray($(ulElement).find(Selector.ACTIVE))
         previous = previous[previous.length - 1]
-
-        if (previous) {
-          previous = $(previous).find(Selector.A)[0]
-        }
       }
 
       let hideEvent = $.Event(Event.HIDE, {
@@ -120,7 +117,7 @@ const Tab = (($) => {
       }
 
       this._activate(
-        $(this._element).closest(Selector.LI)[0],
+        this._element,
         ulElement
       )
 
@@ -189,22 +186,16 @@ const Tab = (($) => {
         let dropdownChild = $(active).find(
           Selector.DROPDOWN_ACTIVE_CHILD
         )[0]
+
         if (dropdownChild) {
           $(dropdownChild).removeClass(ClassName.ACTIVE)
         }
 
-        let activeToggle = $(active).find(Selector.DATA_TOGGLE)[0]
-        if (activeToggle) {
-          activeToggle.setAttribute('aria-expanded', false)
-        }
+        active.setAttribute('aria-expanded', false)
       }
 
       $(element).addClass(ClassName.ACTIVE)
-
-      let elementToggle = $(element).find(Selector.DATA_TOGGLE)[0]
-      if (elementToggle) {
-        elementToggle.setAttribute('aria-expanded', true)
-      }
+      element.setAttribute('aria-expanded', true)
 
       if (isTransitioning) {
         Util.reflow(element)
@@ -216,15 +207,12 @@ const Tab = (($) => {
       if (element.parentNode &&
          ($(element.parentNode).hasClass(ClassName.DROPDOWN_MENU))) {
 
-        let dropdownElement = $(element).closest(Selector.LI_DROPDOWN)[0]
+        let dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
         if (dropdownElement) {
-          $(dropdownElement).addClass(ClassName.ACTIVE)
+          $(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
         }
 
-        elementToggle = $(element).find(Selector.DATA_TOGGLE)[0]
-        if (elementToggle) {
-          elementToggle.setAttribute('aria-expanded', true)
-        }
+        element.setAttribute('aria-expanded', true)
       }
 
       if (callback) {
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">