use only data target to query elements in our pluginfeat/data-target

9 files changed, 122 insertions, 141 deletions

diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index a5e101aad..fcf3adfa5 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -376,7 +376,7 @@ describe('Collapse', () => {
   describe('data-api', () => {
     it('should show multiple collapsed elements', done => {
       fixtureEl.innerHTML = [
-        '<a role="button" data-toggle="collapse" class="collapsed" href=".multi"></a>',
+        '<a href="#" role="button" data-toggle="collapse" class="collapsed" data-target=".multi"></a>',
         '<div id="collapse1" class="collapse multi"></div>',
         '<div id="collapse2" class="collapse multi"></div>'
       ].join('')
@@ -398,7 +398,7 @@ describe('Collapse', () => {
 
     it('should hide multiple collapsed elements', done => {
       fixtureEl.innerHTML = [
-        '<a role="button" data-toggle="collapse" href=".multi"></a>',
+        '<a href="#" role="button" data-toggle="collapse" data-target=".multi"></a>',
         '<div id="collapse1" class="collapse multi show"></div>',
         '<div id="collapse2" class="collapse multi show"></div>'
       ].join('')
@@ -466,11 +466,11 @@ describe('Collapse', () => {
       fixtureEl.innerHTML = [
         '<div id="accordion">',
         '  <div class="item">',
-        '    <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
+        '    <a id="linkTrigger" href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
         '    <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>',
         '  </div>',
         '  <div class="item">',
-        '    <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
+        '    <a id="linkTriggerTwo" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
         '    <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>',
         '  </div>',
         '</div>'
@@ -521,13 +521,13 @@ describe('Collapse', () => {
         '  <div class="row">',
         '    <div class="col-lg-6">',
         '      <div class="item">',
-        '        <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
+        '        <a id="linkTrigger" href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
         '        <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>',
         '      </div>',
         '    </div>',
         '    <div class="col-lg-6">',
         '      <div class="item">',
-        '        <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
+        '        <a id="linkTriggerTwo" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
         '        <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>',
         '      </div>',
         '    </div>',
@@ -647,18 +647,18 @@ describe('Collapse', () => {
       fixtureEl.innerHTML = [
         '<div id="accordion">',
         '  <div class="item">',
-        '    <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
+        '    <a id="linkTrigger" href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>',
         '    <div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">',
         '      <div id="nestedAccordion">',
         '        <div class="item">',
-        '          <a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>',
+        '          <a id="nestedLinkTrigger" href="#" data-toggle="collapse" data-target="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>',
         '          <div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>',
         '        </div>',
         '      </div>',
         '    </div>',
         '  </div>',
         '  <div class="item">',
-        '    <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
+        '    <a id="linkTriggerTwo" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>',
         '    <div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>',
         '  </div>',
         '</div>'
@@ -703,9 +703,9 @@ describe('Collapse', () => {
 
     it('should add "collapsed" class and set aria-expanded to triggers only when all the targeted collapse are hidden', done => {
       fixtureEl.innerHTML = [
-        '<a id="trigger1" role="button" data-toggle="collapse" href="#test1"></a>',
-        '<a id="trigger2" role="button" data-toggle="collapse" href="#test2"></a>',
-        '<a id="trigger3" role="button" data-toggle="collapse" href=".multi"></a>',
+        '<a id="trigger1" href="#" role="button" data-toggle="collapse" data-target="#test1"></a>',
+        '<a id="trigger2" href="#" role="button" data-toggle="collapse" data-target="#test2"></a>',
+        '<a id="trigger3" href="#" role="button" data-toggle="collapse" data-target=".multi"></a>',
         '<div id="test1" class="multi"></div>',
         '<div id="test2" class="multi"></div>'
       ].join('')
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index c7f05ed22..cf32c56c0 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -1086,9 +1086,9 @@ describe('Dropdown', () => {
       fixtureEl.innerHTML = [
         '<div class="nav">',
         '  <div class="dropdown" id="testmenu">',
-        '    <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu</a>',
+        '    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#testmenu">Test menu</a>',
         '    <div class="dropdown-menu">',
-        '      <a class="dropdown-item" href="#sub1">Submenu 1</a>',
+        '      <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>',
         '    </div>',
         '  </div>',
         '</div>',
@@ -1138,9 +1138,9 @@ describe('Dropdown', () => {
     it('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', done => {
       fixtureEl.innerHTML = [
         '<div class="dropdown">',
-        '  <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu</a>',
+        '  <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#testmenu">Test menu</a>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>',
         '  </div>',
         '</div>',
         '<div class="btn-group">',
@@ -1199,7 +1199,7 @@ describe('Dropdown', () => {
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>',
         '  </div>',
         '</div>'
       ].join('')
@@ -1231,7 +1231,7 @@ describe('Dropdown', () => {
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>',
         '    <input type="text">',
         '    <textarea></textarea>',
         '  </div>',
@@ -1267,7 +1267,7 @@ describe('Dropdown', () => {
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item disabled" href="#sub1">Submenu 1</a>',
+        '    <a href="#" class="dropdown-item disabled" data-target="#sub1">Submenu 1</a>',
         '    <button class="dropdown-item" type="button" disabled>Disabled button</button>',
         '    <a id="item1" class="dropdown-item" href="#">Another link</a>',
         '  </div>',
@@ -1303,8 +1303,8 @@ describe('Dropdown', () => {
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <button class="dropdown-item d-none" type="button">Hidden button by class</button>',
-        '    <a class="dropdown-item" href="#sub1" style="display: none">Hidden link</a>',
-        '    <a class="dropdown-item" href="#sub1" style="visibility: hidden">Hidden link</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1" style="display: none">Hidden link</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1" style="visibility: hidden">Hidden link</a>',
         '    <a id="item1" class="dropdown-item" href="#">Another link</a>',
         '  </div>',
         '</div>'
@@ -1454,7 +1454,7 @@ describe('Dropdown', () => {
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
+        '    <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>',
         '    <input type="text">',
         '    <textarea></textarea>',
         '  </div>',
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index 9ac02ce99..53201a0b6 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -64,7 +64,7 @@ describe('ScrollSpy', () => {
       expect(navEl.getAttribute('id')).not.toEqual(null)
     })
 
-    it('should not process element without target', () => {
+    it('should not process element without target and process elements with target inside href attribute', () => {
       fixtureEl.innerHTML = [
         '<nav id="navigation" class="navbar">',
         '  <ul class="navbar-nav">',
@@ -86,6 +86,28 @@ describe('ScrollSpy', () => {
       expect(scrollSpy._targets.length).toEqual(2)
     })
 
+    it('should process element with target in data-target', () => {
+      fixtureEl.innerHTML = [
+        '<nav id="navigation" class="navbar">',
+        '  <ul class="navbar-nav">',
+        '    <li class="nav-item active"><a class="nav-link" id="one-link" href="#">One</a></li>',
+        '    <li class="nav-item"><a class="nav-link" id="two-link" href="#" data-target="#two">Two</a></li>',
+        '    <li class="nav-item"><a class="nav-link" id="three-link" href="#" data-target="#three">Three</a></li>',
+        '  </ul>',
+        '</nav>',
+        '<div id="content" style="height: 200px; overflow-y: auto;">',
+        ' <div id="two" style="height: 300px;"></div>',
+        ' <div id="three" style="height: 10px;"></div>',
+        '</div>'
+      ].join('')
+
+      const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), {
+        target: '#navigation'
+      })
+
+      expect(scrollSpy._targets.length).toEqual(2)
+    })
+
     it('should only switch "active" class on current target', done => {
       fixtureEl.innerHTML = [
         '<div id="root" class="active" style="display: block">',
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index a08fec20d..044957cc0 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -24,8 +24,8 @@ describe('Tab', () => {
     it('should activate element by tab id', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav">',
-        '  <li><a href="#home" role="tab">Home</a></li>',
-        '  <li><a id="triggerProfile" role="tab" href="#profile">Profile</a></li>',
+        '  <li><a href="#" data-target="#home" role="tab">Home</a></li>',
+        '  <li><a href="#" id="triggerProfile" role="tab" data-target="#profile">Profile</a></li>',
         '</ul>',
         '<ul>',
         '  <li id="home"></li>',
@@ -48,8 +48,8 @@ describe('Tab', () => {
     it('should activate element by tab id in ordered list', done => {
       fixtureEl.innerHTML = [
         '<ol class="nav nav-pills">',
-        '  <li><a href="#home">Home</a></li>',
-        '  <li><a id="triggerProfile" href="#profile">Profile</a></li>',
+        '  <li><a href="#" data-target="#home">Home</a></li>',
+        '  <li><a href="#" id="triggerProfile" data-target="#profile">Profile</a></li>',
         '</ol>',
         '<ol>',
         '  <li id="home"></li>',
@@ -71,8 +71,8 @@ describe('Tab', () => {
     it('should activate element by tab id in nav list', done => {
       fixtureEl.innerHTML = [
         '<nav class="nav">',
-        '  <a href="#home">Home</a>',
-        '  <a id="triggerProfile" href="#profile">Profile</a>',
+        '  <a href="#" data-target="#home">Home</a>',
+        '  <a href="#" id="triggerProfile" data-target="#profile">Profile</a>',
         '</nav>',
         '<nav><div id="home"></div><div id="profile"></div></nav>'
       ].join('')
@@ -91,8 +91,8 @@ describe('Tab', () => {
     it('should activate element by tab id in list group', done => {
       fixtureEl.innerHTML = [
         '<div class="list-group">',
-        '  <a href="#home">Home</a>',
-        '  <a id="triggerProfile" href="#profile">Profile</a>',
+        '  <a href="#" data-target="#home">Home</a>',
+        '  <a href="#" id="triggerProfile" data-target="#profile">Profile</a>',
         '</div>',
         '<nav><div id="home"></div><div id="profile"></div></nav>'
       ].join('')
@@ -135,8 +135,8 @@ describe('Tab', () => {
     it('should not fire shown when tab is already active', done => {
       fixtureEl.innerHTML = [
         '<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"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" data-target="#profile" class="nav-link" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -161,8 +161,8 @@ describe('Tab', () => {
     it('should not fire shown when tab is disabled', done => {
       fixtureEl.innerHTML = [
         '<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 disabled" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" data-target="#profile" class="nav-link disabled" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -187,8 +187,8 @@ describe('Tab', () => {
     it('show and shown events should reference correct relatedTarget', done => {
       fixtureEl.innerHTML = [
         '<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 id="triggerProfile" href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" id="triggerProfile" data-target="#profile" class="nav-link" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -200,11 +200,11 @@ describe('Tab', () => {
       const secondTab = new Tab(secondTabTrigger)
 
       secondTabTrigger.addEventListener('show.bs.tab', ev => {
-        expect(ev.relatedTarget.hash).toEqual('#home')
+        expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#home')
       })
 
       secondTabTrigger.addEventListener('shown.bs.tab', ev => {
-        expect(ev.relatedTarget.hash).toEqual('#home')
+        expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#home')
         expect(secondTabTrigger.getAttribute('aria-selected')).toEqual('true')
         expect(fixtureEl.querySelector('a:not(.active)').getAttribute('aria-selected')).toEqual('false')
         done()
@@ -216,8 +216,8 @@ describe('Tab', () => {
     it('should fire hide and hidden events', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav">',
-        '  <li><a href="#home">Home</a></li>',
-        '  <li><a href="#profile">Profile</a></li>',
+        '  <li><a href="#" data-target="#home">Home</a></li>',
+        '  <li><a href="#" data-target="#profile">Profile</a></li>',
         '</ul>'
       ].join('')
 
@@ -232,12 +232,12 @@ describe('Tab', () => {
 
       triggerList[0].addEventListener('hide.bs.tab', ev => {
         hideCalled = true
-        expect(ev.relatedTarget.hash).toEqual('#profile')
+        expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#profile')
       })
 
       triggerList[0].addEventListener('hidden.bs.tab', ev => {
         expect(hideCalled).toEqual(true)
-        expect(ev.relatedTarget.hash).toEqual('#profile')
+        expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#profile')
         done()
       })
 
@@ -247,8 +247,8 @@ describe('Tab', () => {
     it('should not fire hidden when hide is prevented', done => {
       fixtureEl.innerHTML = [
         '<ul class="nav">',
-        '  <li><a href="#home">Home</a></li>',
-        '  <li><a href="#profile">Profile</a></li>',
+        '  <li><a href="#" data-target="#home">Home</a></li>',
+        '  <li><a href="#" data-target="#profile">Profile</a></li>',
         '</ul>'
       ].join('')
 
@@ -282,17 +282,17 @@ describe('Tab', () => {
       fixtureEl.innerHTML = [
         '<ul class="nav nav-tabs" role="tablist">',
         '  <li class="nav-item" role="presentation">',
-        '    <a class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">',
+        '    <a href="#" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">',
         '      <button class="close"><span aria-hidden="true">&times;</span></button>',
         '    </a>',
         '  </li>',
         '  <li class="nav-item" role="presentation">',
-        '    <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-toggle="tab">',
+        '    <a href="#" id="secondNav" class="nav-link nav-tab" data-target="#buzz" role="tab" data-toggle="tab">',
         '      <button class="close"><span aria-hidden="true">&times;</span></button>',
         '    </a>',
         '  </li>',
         '  <li class="nav-item" role="presentation">',
-        '    <a class="nav-link nav-tab" href="#references" role="tab" data-toggle="tab">',
+        '    <a href="#" class="nav-link nav-tab" data-target="#references" role="tab" data-toggle="tab">',
         '      <button id="btnClose" class="close"><span aria-hidden="true">&times;</span></button>',
         '    </a>',
         '  </li>',
@@ -316,7 +316,7 @@ describe('Tab', () => {
       btnCloseEl.addEventListener('click', () => {
         const linkEl = btnCloseEl.parentNode
         const liEl = linkEl.parentNode
-        const tabId = linkEl.getAttribute('href')
+        const tabId = linkEl.getAttribute('data-target')
         const tabIdEl = fixtureEl.querySelector(tabId)
 
         liEl.parentNode.removeChild(liEl)
@@ -424,8 +424,8 @@ describe('Tab', () => {
     it('should create dynamically a tab', done => {
       fixtureEl.innerHTML = [
         '<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 id="triggerProfile" data-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" id="triggerProfile" data-toggle="tab" data-target="#profile" class="nav-link" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane active" id="home" role="tabpanel"></div>',
@@ -447,13 +447,13 @@ describe('Tab', () => {
     it('selected tab should deactivate previous selected link in dropdown', () => {
       fixtureEl.innerHTML = [
         '<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"><a href="#" class="nav-link" data-target="#home" data-toggle="tab">Home</a></li>',
+        '  <li class="nav-item"><a href="#" class="nav-link" data-target="#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>',
+        '      <a href="#" class="dropdown-item active" data-target="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>',
+        '      <a href="#" class="dropdown-item" data-target="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>',
         '    </div>',
         '  </li>',
         '</ul>'
@@ -470,15 +470,15 @@ describe('Tab', () => {
     it('should handle nested tabs', done => {
       fixtureEl.innerHTML = [
         '<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>',
+        '  <a href="#" id="tab1" data-target="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>',
+        '  <a href="#" data-target="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>',
+        '  <a href="#" data-target="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>',
         '</nav>',
         '<div class="tab-content">',
         '  <div class="tab-pane" id="x-tab1" role="tabpanel">',
         '    <nav class="nav nav-tabs" role="tablist">',
-        '      <a href="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>',
-        '      <a id="tabNested2" href="#nested-tab2" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>',
+        '      <a href="#" data-target="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>',
+        '      <a href="#" id="tabNested2" data-target="#nested-tab2" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>',
         '    </nav>',
         '    <div class="tab-content">',
         '      <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>',
@@ -510,8 +510,8 @@ describe('Tab', () => {
     it('should not remove fade class if no active pane is present', done => {
       fixtureEl.innerHTML = [
         '<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"><a href="#" id="tab-home" data-target="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>',
+        '  <li class="nav-item" role="presentation"><a href="#" id="tab-profile" data-target="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>',
         '</ul>',
         '<div class="tab-content">',
         '  <div class="tab-pane fade" id="home" role="tabpanel"></div>',
@@ -548,10 +548,10 @@ describe('Tab', () => {
       fixtureEl.innerHTML = [
         '<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>',
+        '    <a href="#" class="nav-link nav-tab" data-target="#home" role="tab" data-toggle="tab">Home</a>',
         '  </li>',
         '  <li class="nav-item" role="presentation">',
-        '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
+        '    <a href="#" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</a>',
         '  </li>',
         '</ul>',
         '<div class="tab-content">',
@@ -574,10 +574,10 @@ describe('Tab', () => {
       fixtureEl.innerHTML = [
         '<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>',
+        '    <a href="#" class="nav-link nav-tab" data-target="#home" role="tab" data-toggle="tab">Home</a>',
         '  </li>',
         '  <li class="nav-item" role="presentation">',
-        '    <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
+        '    <a href="#" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</a>',
         '  </li>',
         '</ul>',
         '<div class="tab-content">',
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index 541c10baa..de48cf53e 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -35,36 +35,6 @@ describe('Util', () => {
       expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
     })
 
-    it('should get selector from href if no data-target set', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" href=".target"></a>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
-    })
-
-    it('should get selector from href if data-target equal to #', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" data-target="#" href=".target"></a>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
-    })
-
-    it('should return null if selector not found', () => {
-      fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getSelectorFromElement(testEl)).toBeNull()
-    })
-
     it('should return null if no selector', () => {
       fixtureEl.innerHTML = '<div></div>'
 
@@ -86,19 +56,8 @@ describe('Util', () => {
       expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
     })
 
-    it('should get element from href if no data-target set', () => {
-      fixtureEl.innerHTML = [
-        '<a id="test" href=".target"></a>',
-        '<div class="target"></div>'
-      ].join('')
-
-      const testEl = fixtureEl.querySelector('#test')
-
-      expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target'))
-    })
-
     it('should return null if element not found', () => {
-      fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
+      fixtureEl.innerHTML = '<a id="test" data-target=".target"></a>'
 
       const testEl = fixtureEl.querySelector('#test')
 
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index d66f14053..f788256f7 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -34,11 +34,11 @@
             <img src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide">
           </div>
         </div>
-        <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
+        <a href="#" class="carousel-control-prev" data-target="#carousel-example-generic" role="button" data-slide="prev">
           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
           <span class="sr-only">Previous</span>
         </a>
-        <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
+        <a href="#" class="carousel-control-next" data-target="#carousel-example-generic" role="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
         </a>
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 0fa97133c..7b0d1bb5b 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -14,7 +14,7 @@
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingOne">
             <h5 class="mb-0">
-              <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+              <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                 Collapsible Group Item #1
               </a>
             </h5>
@@ -29,7 +29,7 @@
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingTwo">
             <h5 class="mb-0">
-              <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+              <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                 Collapsible Group Item #2
               </a>
             </h5>
@@ -43,7 +43,7 @@
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingThree">
             <h5 class="mb-0">
-              <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+              <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                 Collapsible Group Item #3
               </a>
             </h5>
@@ -57,7 +57,7 @@
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingFour">
             <h5 class="mb-0">
-              <a class="collapsed" data-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+              <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                 Collapsible Group Item with XSS in data-parent
               </a>
             </h5>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index fa043af00..af59969aa 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -58,7 +58,7 @@
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingOne">
                     <h5 class="mb-0">
-                      <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                      <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                         Collapsible Group Item #1
                       </a>
                     </h5>
@@ -73,7 +73,7 @@
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingTwo">
                     <h5 class="mb-0">
-                      <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                      <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                         Collapsible Group Item #2
                       </a>
                     </h5>
@@ -87,7 +87,7 @@
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingThree">
                     <h5 class="mb-0">
-                      <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                      <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                         Collapsible Group Item #3
                       </a>
                     </h5>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index e5bc0448b..6809c6d93 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -19,16 +19,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
+          <a href="#" class="nav-link active" data-toggle="tab" data-target="#home" role="tab">Home</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#profile" role="tab">Profile</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat" role="tab">@fat</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#fat" role="tab">@fat</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -55,16 +55,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a>
+          <a href="#" class="nav-link active" data-toggle="tab" data-target="#home2" role="tab">Home</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#profile2" role="tab">Profile</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat2" role="tab">@fat</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#fat2" role="tab">@fat</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo2" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -91,16 +91,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#home3" role="tab">Home</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#home3" role="tab">Home</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#profile3" role="tab">Profile</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat3" role="tab">@fat</a>
+          <a class="nav-link" data-toggle="tab" data-target="#fat3" role="tab">@fat</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo3" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -127,16 +127,16 @@
 
       <ul class="nav nav-tabs" role="tablist">
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#home4" role="tab">Home</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#home4" role="tab">Home</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#profile4" role="tab">Profile</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#profile4" role="tab">Profile</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#fat4" role="tab">@fat</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#fat4" role="tab">@fat</a>
         </li>
         <li class="nav-item" role="presentation">
-          <a class="nav-link" data-toggle="tab" href="#mdo4" role="tab">@mdo</a>
+          <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo4" role="tab">@mdo</a>
         </li>
       </ul>
 
@@ -161,13 +161,13 @@
 
       <h4>Tabs with nav (with fade)</h4>
       <nav class="nav nav-pills">
-        <a class="nav-link nav-item active" data-toggle="tab" href="#home5">Home</a>
-        <a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a>
+        <a href="#" class="nav-link nav-item active" data-toggle="tab" data-target="#home5">Home</a>
+        <a href="#" class="nav-link nav-item" data-toggle="tab" data-target="#profile5">Profile</a>
         <div class="nav-item dropdown">
           <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-expanded="false">Dropdown</a>
           <ul class="dropdown-menu" aria-labelledby="dropdown5">
-            <li><a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a></li>
-            <li><a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a></li>
+            <li><a href="#" class="dropdown-item" data-toggle="tab" data-target="#fat5">@fat</a></li>
+            <li><a href="#" class="dropdown-item" data-toggle="tab" data-target="#mdo5">@mdo</a></li>
           </ul>
         </div>
         <a class="nav-link nav-item disabled" href="#">Disabled</a>
@@ -196,10 +196,10 @@
       <div class="row">
         <div class="col-4">
           <div class="list-group" id="list-tab" role="tablist">
-            <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
-            <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
-            <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
-            <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
+            <a href="#" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" data-target="#list-home" role="tab" aria-controls="list-home">Home</a>
+            <a href="#" class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" data-target="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
+            <a href="#" class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" data-target="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
+            <a href="#" class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" data-target="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
           </div>
         </div>
         <div class="col-8">