diff --git a/js/src/tab.js b/js/src/tab.js index c069b0a9a950..d5669b7ad01d 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -45,10 +45,10 @@ const Tab = (($) => { A : 'a', LI : 'li', DROPDOWN : '.dropdown', - LIST : 'ul:not(.dropdown-menu), ol:not(.dropdown-menu), nav:not(.dropdown-menu)', - FADE_CHILD : '> .nav-item .fade, > .fade', + LIST : 'ul:not(.dropdown-menu), ol:not(.dropdown-menu), nav:not(.dropdown-menu), .list-group:not(.dropdown-menu)', + FADE_CHILD : '> .nav-item .fade, > .list-group-item .fade, > .fade', ACTIVE : '.active', - ACTIVE_CHILD : '> .nav-item > .active, > .active', + ACTIVE_CHILD : '> .nav-item > .active, > .list-group-item > .active, > .active', DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"]', DROPDOWN_TOGGLE : '.dropdown-toggle', DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active' @@ -182,6 +182,9 @@ const Tab = (($) => { _transitionComplete(element, active, isTransitioning, callback) { if (active) { $(active).removeClass(ClassName.ACTIVE) + if ($(active).hasClass('list-group-item')) { + $(active).find('a.nav-link').removeClass(ClassName.ACTIVE) + } const dropdownChild = $(active.parentNode).find( Selector.DROPDOWN_ACTIVE_CHILD @@ -195,6 +198,9 @@ const Tab = (($) => { } $(element).addClass(ClassName.ACTIVE) + if ($(element.parentNode).hasClass('list-group-item')) { + $(element.parentNode).addClass(ClassName.ACTIVE) + } element.setAttribute('aria-expanded', true) if (isTransitioning) { diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js index 734648e9ec23..d0aeb372b6dc 100644 --- a/js/tests/unit/tab.js +++ b/js/tests/unit/tab.js @@ -108,6 +108,22 @@ $(function () { assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home') }) + QUnit.test('should activate element by tab id in list-group', function (assert) { + assert.expect(2) + var ulHTML = '' + + $('