Menu icon Foundation
Tab not working with Class in href, Foundation 6

Hello,

 

I tried to used Class in href like the example below. It doesn't work. How could I do?

It works in ID in href, but not work in Class.

 

<ul class="tabs" data-active-collapse="true" data-tabs id="collapsing-tabs">

  <li class="tabs-title is-active"><a href=".panel1c" aria-selected="true">Tab 1</a></li>

  <li class="tabs-title"><a href=".panel2c">Tab 2</a></li>

  <li class="tabs-title"><a href=".panel3c">Tab 3</a></li>

  <li class="tabs-title"><a href=".panel4c">Tab 4</a></li>

</ul>



<div id="abc" class="tabs-content" data-tabs-content="collapsing-tabs">

  <div class="tabs-panel is-active panel1c">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  </div>

  <div class="tabs-panel panel2c">

    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>

  </div>

  <div class="tabs-panel panel3c">

    <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">

  </div>

  <div class="tabs-panel panel4c">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  </div>

</div>

 

tab

Hello,

 

I tried to used Class in href like the example below. It doesn't work. How could I do?

It works in ID in href, but not work in Class.

 

<ul class="tabs" data-active-collapse="true" data-tabs id="collapsing-tabs">

  <li class="tabs-title is-active"><a href=".panel1c" aria-selected="true">Tab 1</a></li>

  <li class="tabs-title"><a href=".panel2c">Tab 2</a></li>

  <li class="tabs-title"><a href=".panel3c">Tab 3</a></li>

  <li class="tabs-title"><a href=".panel4c">Tab 4</a></li>

</ul>



<div id="abc" class="tabs-content" data-tabs-content="collapsing-tabs">

  <div class="tabs-panel is-active panel1c">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  </div>

  <div class="tabs-panel panel2c">

    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>

  </div>

  <div class="tabs-panel panel3c">

    <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">

  </div>

  <div class="tabs-panel panel4c">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  </div>

</div>