mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +03:00
Dynamic tabs: use buttons rather than links (backport to v4) (#33163)
* Manually backport 32630 Dynamic tabs: use buttons rather than links * Tweak unit test * Tweak unit tests * More tweakage * show() should also bail if `disabled` attribute is set * Tweak tests * Simplify test for relatedTarget * Temporarily remove problematic test (as i can't get local tests to run just noww) * Revert previous * test: fix broken test cases for tab.js * test: fix role=tablist invalid on nav element * test: prefer <div/> over <div></div> * Manually backport 32630 Dynamic tabs: use buttons rather than links * test: fix broken test cases for tab.js * Fixes * Remove and ignore lock file Co-authored-by: alpadev <alpa.muc@gmail.com> Co-authored-by: Mark Otto <markd.otto@gmail.com> Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
Patrick H. Lauke
+102
-109
@@ -44,14 +44,30 @@ $(function () {
|
||||
assert.strictEqual($tab[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should activate element by tab id', function (assert) {
|
||||
QUnit.test('should activate element by tab id (using buttons, the preferred semantic way)', function (assert) {
|
||||
assert.expect(2)
|
||||
var tabsHTML = '<ul class="nav">' +
|
||||
'<li><a href="#home">Home</a></li>' +
|
||||
'<li><a href="#profile">Profile</a></li>' +
|
||||
var tabsHTML = '<ul class="nav" role="tablist">' +
|
||||
'<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
|
||||
'<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
|
||||
'</ul>'
|
||||
|
||||
$('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
|
||||
$('<ul><li id="home" role="tabpanel"></li><li id="profile" role="tabpanel"></li></ul>').appendTo('#qunit-fixture')
|
||||
|
||||
$(tabsHTML).find('li:last-child button').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
|
||||
$(tabsHTML).find('li:first-child button').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||
})
|
||||
|
||||
QUnit.test('should activate element by tab id (using links for tabs - not ideal, but still supported)', function (assert) {
|
||||
assert.expect(2)
|
||||
var tabsHTML = '<ul class="nav" role="tablist">' +
|
||||
'<li><a href="#home" role="tab">Home</a></li>' +
|
||||
'<li><a href="#profile" role="tab">Profile</a></li>' +
|
||||
'</ul>'
|
||||
|
||||
$('<ul><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ul>').appendTo('#qunit-fixture')
|
||||
|
||||
$(tabsHTML).find('li:last-child a').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
@@ -79,48 +95,48 @@ $(function () {
|
||||
QUnit.test('should activate element by tab id in ordered list', function (assert) {
|
||||
assert.expect(2)
|
||||
var pillsHTML = '<ol class="nav nav-pills">' +
|
||||
'<li><a href="#home">Home</a></li>' +
|
||||
'<li><a href="#profile">Profile</a></li>' +
|
||||
'<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
|
||||
'<li><button type="button" href="#profile" role="tab">Profile</button></li>' +
|
||||
'</ol>'
|
||||
|
||||
$('<ol><li id="home"/><li id="profile"/></ol>').appendTo('#qunit-fixture')
|
||||
$('<ol><li id="home" role="tabpanel"/><li id="profile" role="tabpanel"/></ol>').appendTo('#qunit-fixture')
|
||||
|
||||
$(pillsHTML).find('li:last-child a').bootstrapTab('show')
|
||||
$(pillsHTML).find('li:last-child button').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
|
||||
$(pillsHTML).find('li:first-child a').bootstrapTab('show')
|
||||
$(pillsHTML).find('li:first-child button').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||
})
|
||||
|
||||
QUnit.test('should activate element by tab id in nav list', function (assert) {
|
||||
assert.expect(2)
|
||||
var tabsHTML = '<nav class="nav">' +
|
||||
'<a href="#home">Home</a>' +
|
||||
'<a href="#profile">Profile</a>' +
|
||||
'<button type="button" data-target="#home" role="tab">Home</button>' +
|
||||
'<button type="button" data-target="#profile" role="tab">Profile</a>' +
|
||||
'</nav>'
|
||||
|
||||
$('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
|
||||
$('<div><div id="home" role="tabpanel"/><div id="profile" role="tabpanel"/></div>').appendTo('#qunit-fixture')
|
||||
|
||||
$(tabsHTML).find('a:last-child').bootstrapTab('show')
|
||||
$(tabsHTML).find('button:last-child').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
|
||||
$(tabsHTML).find('a:first-child').bootstrapTab('show')
|
||||
$(tabsHTML).find('button:first-child').bootstrapTab('show')
|
||||
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 tabsHTML = '<div class="list-group">' +
|
||||
'<a href="#home">Home</a>' +
|
||||
'<a href="#profile">Profile</a>' +
|
||||
var tabsHTML = '<div class="list-group" role="tablist">' +
|
||||
'<button type="button" data-target="#home" role="tab">Home</button>' +
|
||||
'<button type="button" data-target="#profile" role="tab">Profile</button>' +
|
||||
'</div>'
|
||||
|
||||
$('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
|
||||
$('<div><div id="home" role="tabpanel"/><div id="profile" role="tabpanel"/></div>').appendTo('#qunit-fixture')
|
||||
|
||||
$(tabsHTML).find('a:last-child').bootstrapTab('show')
|
||||
$(tabsHTML).find('button:last-child').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
|
||||
$(tabsHTML).find('a:first-child').bootstrapTab('show')
|
||||
$(tabsHTML).find('button:first-child').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||
})
|
||||
|
||||
@@ -143,8 +159,8 @@ $(function () {
|
||||
QUnit.test('should not fire shown when tab is already active', function (assert) {
|
||||
assert.expect(0)
|
||||
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
|
||||
'<li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>' +
|
||||
'<li class="nav-item" role="presentation"><a href="#profile" class="nav-link" role="tab">Profile</a></li>' +
|
||||
'<li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
|
||||
'<li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab">Profile</button></li>' +
|
||||
'</ul>' +
|
||||
'<div class="tab-content">' +
|
||||
'<div class="tab-pane active" id="home" role="tabpanel"></div>' +
|
||||
@@ -152,7 +168,7 @@ $(function () {
|
||||
'</div>'
|
||||
|
||||
$(tabsHTML)
|
||||
.find('a.active')
|
||||
.find('button.active')
|
||||
.on('shown.bs.tab', function () {
|
||||
assert.ok(true, 'shown event fired')
|
||||
})
|
||||
@@ -162,8 +178,8 @@ $(function () {
|
||||
QUnit.test('should not fire shown when tab is disabled', function (assert) {
|
||||
assert.expect(0)
|
||||
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
|
||||
'<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>' +
|
||||
'<li class="nav-item"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>' +
|
||||
'<li class="nav-item"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
|
||||
'<li class="nav-item"><button type="button" data-target="#profile" class="nav-link" disabled role="tab">Profile</button></li>' +
|
||||
'</ul>' +
|
||||
'<div class="tab-content">' +
|
||||
'<div class="tab-pane active" id="home" role="tabpanel"></div>' +
|
||||
@@ -171,7 +187,7 @@ $(function () {
|
||||
'</div>'
|
||||
|
||||
$(tabsHTML)
|
||||
.find('a.disabled')
|
||||
.find('button[disabled]')
|
||||
.on('shown.bs.tab', function () {
|
||||
assert.ok(true, 'shown event fired')
|
||||
})
|
||||
@@ -182,26 +198,23 @@ $(function () {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var dropHTML =
|
||||
'<ul class="drop nav">' +
|
||||
' <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' +
|
||||
' <ul class="dropdown-menu nav">' +
|
||||
' <li><a href="#a1-1" data-toggle="tab">1-1</a></li>' +
|
||||
' <li><a href="#a1-2" data-toggle="tab">1-2</a></li>' +
|
||||
' </ul>' +
|
||||
' </li>' +
|
||||
'</ul>'
|
||||
var tabsHTML =
|
||||
'<ul class="nav nav-tabs" role="tablist">' +
|
||||
' <li class="nav-item" role="presentation"><button type="button" data-target="#home" class="nav-link active" role="tab" aria-selected="true">Home</button></li>' +
|
||||
' <li class="nav-item" role="presentation"><button type="button" data-target="#profile" class="nav-link" role="tab" aria-selected="false">Profile</button></li>' +
|
||||
'</ul>' +
|
||||
'<div class="tab-content">' +
|
||||
' <div class="tab-pane active" id="home" role="tabpanel"/>' +
|
||||
' <div class="tab-pane" id="profile" role="tabpanel"/>' +
|
||||
'</div>'
|
||||
|
||||
$(dropHTML)
|
||||
.find('ul > li:first-child a')
|
||||
.bootstrapTab('show')
|
||||
.end()
|
||||
.find('ul > li:last-child a')
|
||||
$(tabsHTML)
|
||||
.find('li:last-child button')
|
||||
.on('show.bs.tab', function (e) {
|
||||
assert.strictEqual(e.relatedTarget.hash, '#a1-1', 'references correct element as relatedTarget')
|
||||
assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
|
||||
})
|
||||
.on('shown.bs.tab', function (e) {
|
||||
assert.strictEqual(e.relatedTarget.hash, '#a1-1', 'references correct element as relatedTarget')
|
||||
assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#home', 'references correct element as relatedTarget')
|
||||
done()
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
@@ -211,30 +224,30 @@ $(function () {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var tabsHTML = '<ul class="nav">' +
|
||||
'<li><a href="#home">Home</a></li>' +
|
||||
'<li><a href="#profile">Profile</a></li>' +
|
||||
var tabsHTML = '<ul class="nav" role="tablist">' +
|
||||
'<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
|
||||
'<li><button type="button" data-target="#profile">Profile</button></li>' +
|
||||
'</ul>'
|
||||
|
||||
$(tabsHTML)
|
||||
.find('li:first-child a')
|
||||
.find('li:first-child button')
|
||||
.on('hide.bs.tab', function () {
|
||||
assert.ok(true, 'hide event fired')
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
.end()
|
||||
.find('li:last-child a')
|
||||
.find('li:last-child button')
|
||||
.bootstrapTab('show')
|
||||
|
||||
$(tabsHTML)
|
||||
.find('li:first-child a')
|
||||
.find('li:first-child button')
|
||||
.on('hidden.bs.tab', function () {
|
||||
assert.ok(true, 'hidden event fired')
|
||||
done()
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
.end()
|
||||
.find('li:last-child a')
|
||||
.find('li:last-child button')
|
||||
.bootstrapTab('show')
|
||||
})
|
||||
|
||||
@@ -242,13 +255,13 @@ $(function () {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var tabsHTML = '<ul class="nav">' +
|
||||
'<li><a href="#home">Home</a></li>' +
|
||||
'<li><a href="#profile">Profile</a></li>' +
|
||||
var tabsHTML = '<ul class="nav" role="tablist">' +
|
||||
'<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
|
||||
'<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
|
||||
'</ul>'
|
||||
|
||||
$(tabsHTML)
|
||||
.find('li:first-child a')
|
||||
.find('li:first-child button')
|
||||
.on('hide.bs.tab', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'hide event fired')
|
||||
@@ -259,7 +272,7 @@ $(function () {
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
.end()
|
||||
.find('li:last-child a')
|
||||
.find('li:last-child button')
|
||||
.bootstrapTab('show')
|
||||
})
|
||||
|
||||
@@ -267,82 +280,62 @@ $(function () {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var tabsHTML = '<ul class="nav">' +
|
||||
'<li><a href="#home">Home</a></li>' +
|
||||
'<li><a href="#profile">Profile</a></li>' +
|
||||
var tabsHTML = '<ul class="nav" role="tablist">' +
|
||||
'<li><button type="button" data-target="#home" role="tab">Home</button></li>' +
|
||||
'<li><button type="button" data-target="#profile" role="tab">Profile</button></li>' +
|
||||
'</ul>'
|
||||
|
||||
$(tabsHTML)
|
||||
.find('li:first-child a')
|
||||
.find('li:first-child button')
|
||||
.on('hide.bs.tab', function (e) {
|
||||
assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
|
||||
assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#profile', 'references correct element as relatedTarget')
|
||||
})
|
||||
.on('hidden.bs.tab', function (e) {
|
||||
assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
|
||||
assert.strictEqual(e.relatedTarget.getAttribute('data-target'), '#profile', 'references correct element as relatedTarget')
|
||||
done()
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
.end()
|
||||
.find('li:last-child a')
|
||||
.find('li:last-child button')
|
||||
.bootstrapTab('show')
|
||||
})
|
||||
|
||||
QUnit.test('selected tab should have aria-selected', function (assert) {
|
||||
QUnit.test('selected tab should have correct aria-selected', function (assert) {
|
||||
assert.expect(8)
|
||||
var tabsHTML = '<ul class="nav nav-tabs">' +
|
||||
'<li><a class="nav-item active" href="#home" toggle="tab" aria-selected="true">Home</a></li>' +
|
||||
'<li><a class="nav-item" href="#profile" toggle="tab" aria-selected="false">Profile</a></li>' +
|
||||
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
|
||||
'<li><button type="button" data-target="#home" role="tab" aria-selected="false">Home</button></li>' +
|
||||
'<li><button type="button" data-target="#profile" role="tab" aria-selected="false">Profile</button></li>' +
|
||||
'</ul>'
|
||||
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
|
||||
|
||||
$tabs.find('li:first-child a').bootstrapTab('show')
|
||||
$tabs.find('li:first-child button').bootstrapTab('show')
|
||||
assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true')
|
||||
assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
|
||||
assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
|
||||
|
||||
$tabs.find('li:last-child a').trigger('click')
|
||||
$tabs.find('li:last-child button').trigger('click')
|
||||
assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after click, shown tab has aria-selected = true')
|
||||
assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after click, hidden tab has aria-selected = false')
|
||||
assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'after click, hidden tab has aria-selected = false')
|
||||
|
||||
$tabs.find('li:first-child a').bootstrapTab('show')
|
||||
$tabs.find('li:first-child button').bootstrapTab('show')
|
||||
assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true')
|
||||
assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
|
||||
assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
|
||||
|
||||
$tabs.find('li:first-child a').trigger('click')
|
||||
$tabs.find('li:first-child button').trigger('click')
|
||||
assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after second show event, shown tab still has aria-selected = true')
|
||||
assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after second show event, hidden tab has aria-selected = false')
|
||||
assert.strictEqual($tabs.find('button:not(.active)').attr('aria-selected'), 'false', 'after second show event, hidden tab has aria-selected = false')
|
||||
})
|
||||
|
||||
QUnit.test('selected tab should deactivate previous selected tab', function (assert) {
|
||||
assert.expect(2)
|
||||
var tabsHTML = '<ul class="nav nav-tabs">' +
|
||||
'<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>' +
|
||||
'<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' +
|
||||
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
|
||||
'<li class="nav-item"><button type="button" data-target="#home" role="tab" data-toggle="tab">Home</button></li>' +
|
||||
'<li class="nav-item"><button type="button" data-target="#profile" role="tab" data-toggle="tab">Profile</button></li>' +
|
||||
'</ul>'
|
||||
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
|
||||
|
||||
$tabs.find('li:last-child a').trigger('click')
|
||||
assert.false($tabs.find('li:first-child a').hasClass('active'))
|
||||
assert.true($tabs.find('li:last-child a').hasClass('active'))
|
||||
})
|
||||
|
||||
QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) {
|
||||
assert.expect(3)
|
||||
var tabsHTML = '<ul class="nav nav-tabs">' +
|
||||
'<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>' +
|
||||
'<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' +
|
||||
'<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>' +
|
||||
'<div class="dropdown-menu">' +
|
||||
'<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>' +
|
||||
'<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>' +
|
||||
'</div>' +
|
||||
'</li>' +
|
||||
'</ul>'
|
||||
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
|
||||
|
||||
$tabs.find('li:first-child a').trigger('click')
|
||||
assert.true($tabs.find('li:first-child a').hasClass('active'))
|
||||
assert.false($tabs.find('li:last-child a').hasClass('active'))
|
||||
assert.false($tabs.find('li:last-child .dropdown-menu a:first-child').hasClass('active'))
|
||||
$tabs.find('li:last-child button').trigger('click')
|
||||
assert.false($tabs.find('li:first-child button').hasClass('active'))
|
||||
assert.true($tabs.find('li:last-child button').hasClass('active'))
|
||||
})
|
||||
|
||||
QUnit.test('should support li > .dropdown-item', function (assert) {
|
||||
@@ -372,9 +365,9 @@ $(function () {
|
||||
var done = assert.async()
|
||||
var tabsHTML =
|
||||
'<nav class="nav nav-tabs" role="tablist">' +
|
||||
' <a id="tab1" href="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' +
|
||||
' <a href="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' +
|
||||
' <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' +
|
||||
' <button type="button" id="tab1" data-target="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</button>' +
|
||||
' <button type="button" data-target="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</button>' +
|
||||
' <button type="button" data-target="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</button>' +
|
||||
'</nav>' +
|
||||
'<div class="tab-content">' +
|
||||
' <div class="tab-pane" id="x-tab1" role="tabpanel">' +
|
||||
@@ -409,8 +402,8 @@ $(function () {
|
||||
assert.expect(6)
|
||||
var done = assert.async()
|
||||
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
|
||||
'<li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>' +
|
||||
'<li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>' +
|
||||
'<li class="nav-item" role="presentation"><button type="button" id="tab-home" data-target="#home" class="nav-link" data-toggle="tab" role="tab">Home</button></li>' +
|
||||
'<li class="nav-item" role="presentation"><button type="button" id="tab-profile" data-target="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</button></li>' +
|
||||
'</ul>' +
|
||||
'<div class="tab-content">' +
|
||||
'<div class="tab-pane fade" id="home" role="tabpanel"></div>' +
|
||||
@@ -489,10 +482,10 @@ $(function () {
|
||||
var html = [
|
||||
'<ul class="nav nav-tabs" role="tablist">',
|
||||
' <li class="nav-item" role="presentation">',
|
||||
' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
|
||||
' <button type="button" class="nav-link nav-tab" data-target="#home" role="tab" data-toggle="tab">Home</button>',
|
||||
' </li>',
|
||||
' <li class="nav-item" role="presentation">',
|
||||
' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
|
||||
' <button type="button" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</button>',
|
||||
' </li>',
|
||||
'</ul>',
|
||||
'<div class="tab-content" role="presentation">',
|
||||
@@ -517,10 +510,10 @@ $(function () {
|
||||
var html = [
|
||||
'<ul class="nav nav-tabs" role="tablist">',
|
||||
' <li class="nav-item" role="presentation">',
|
||||
' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
|
||||
' <button type="button" class="nav-link nav-tab" data-target="#home" role="tab" data-toggle="tab">Home</button>',
|
||||
' </li>',
|
||||
' <li class="nav-item" role="presentation">',
|
||||
' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
|
||||
' <button type="button" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</button>',
|
||||
' </li>',
|
||||
'</ul>',
|
||||
'<div class="tab-content">',
|
||||
|
||||
Reference in New Issue
Block a user