Allow the target tab's id to be specified through data-tabs-target

diff --git a/docs/pages/tabs.md b/docs/pages/tabs.md
index 1f9ddd0a00a0908a2d5b788437f2775fd2b7c07e..d18022c674229a65257df3e509fecbdaddc909ba 100644 (file)
--- a/docs/pages/tabs.md
+++ b/docs/pages/tabs.md
@@ -7,12 +7,12 @@ js: js/foundation.tabs.js
 
 ## Basics
 
-There are two pieces to a tabbed interface: the tabs themselves, and the content for each tab. The tabs are an element with the class `.tabs`, and each item has the class `.tabs-title`. Each tab contains a link to a tab. The `href` of each link should match the ID of a tab.
+There are two pieces to a tabbed interface: the tabs themselves, and the content for each tab. The tabs are an element with the class `.tabs`, and each item has the class `.tabs-title`. Each tab contains a link to a tab. The `href` of each link should match the ID of a tab. Alternatively, the ID can be specified with the attribute `data-tabs-target`.
 
 ```html
 <ul class="tabs" data-tabs id="example-tabs">
   <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
-  <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
+  <li class="tabs-title"><a data-tabs-target="#panel2" href="#/tabs/panel2">Tab 2</a></li>
 </ul>
 ```
 

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index b27ec8158e3f5abe51f637210df305fe41e5bf38..bac091a11b61213da15f6b6d0f05bda9c4143711 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -50,7 +50,7 @@ class Tabs {
       var $elem = $(this),
           $link = $elem.find('a'),
           isActive = $elem.hasClass(`${_this.options.linkActiveClass}`),
-          hash = $link[0].hash.slice(1),
+          hash = $link.attr('data-tabs-target') || $link[0].hash.slice(1),
           linkId = $link[0].id ? $link[0].id : `${hash}-label`,
           $tabContent = $(`#${hash}`);
 
@@ -234,8 +234,8 @@ class Tabs {
     var $oldTab = this.$element.
           find(`.${this.options.linkClass}.${this.options.linkActiveClass}`),
           $tabLink = $target.find('[role="tab"]'),
-          hash = $tabLink[0].hash,
-          $targetContent = this.$tabContent.find(hash);
+          hash = $tabLink.attr('data-tabs-target') || $tabLink[0].hash.slice(1),
+          $targetContent = this.$tabContent.find(`#${hash}`);
 
     //close old tab
     this._collapseTab($oldTab);
@@ -271,8 +271,8 @@ class Tabs {
    */
   _openTab($target) {
       var $tabLink = $target.find('[role="tab"]'),
-          hash = $tabLink[0].hash,
-          $targetContent = this.$tabContent.find(hash);
+          hash = $tabLink.attr('data-tabs-target') || $tabLink[0].hash.slice(1),
+          $targetContent = this.$tabContent.find(`#${hash}`);
 
       $target.addClass(`${this.options.linkActiveClass}`);
 

diff --git a/test/javascript/components/tabs.js b/test/javascript/components/tabs.js
index e91c44cad2546e6e511147f351ea3511ae7b7fd5..3aeaef986c50192425472151fa40092c0868e217 100644 (file)
--- a/test/javascript/components/tabs.js
+++ b/test/javascript/components/tabs.js
@@ -6,7 +6,7 @@ describe('Tabs', function() {
       <ul class="tabs" data-tabs id="example-tabs">
         <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
         <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
-        <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
+        <li class="tabs-title"><a data-tabs-target="panel3" href="#/panel3">Tab 3</a></li>
       </ul>
 
       <div class="tabs-content" data-tabs-content="example-tabs">
@@ -78,6 +78,13 @@ describe('Tabs', function() {
       plugin.selectTab('#panel2');
       $html.find('#panel2').should.be.visible;
     });
+    it('opens the selected tab with data-tabs-target attribute', function() {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Tabs($html.find('[data-tabs]'), {});
+
+      plugin.selectTab('#/panel3');
+      $html.find('#panel3').should.be.visible;
+    });
   });
 
   describe('_handleTabChange()', function() {
@@ -131,4 +138,4 @@ describe('Tabs', function() {
     });
   });
 
-});
\ No newline at end of file
+});