cferdinandi / tabby

Lightweight, accessible vanilla JS toggle tabs.
MIT License
599 stars 73 forks source link

All the title will be active if they have the same href. #92

Closed ramwin closed 7 years ago

ramwin commented 7 years ago

for example:

<ul data-tabs class="tabs">
    <li><a data-tab href="#info">Basic info</a></li>
    <li><a data-tab href="#nopermission">Advantage info</a></li>
    <li><a data-tab href="#nopermission">Secret info</a></li>
</ul>

<div data-tabs-content>
    <div data-tabs-pane class="tabs-pane active" id="info">
        <p><strong>Superheros</strong></p>
        <p>Spiderman, Batman, or Iron Man... which one is your favorite?</p>
    </div>
    <div data-tabs-pane class="tabs-pane" id="nopermission">
        <p><strong>Ice Cream</strong></p>
        <p>Chocolate, vanilla or strawberry?</p>
    </div>
</div>

I have a panel, the last two tab link refer to the same tabs-pane. When I click the last two tab title( Advantage info and Secret info, both of them will be set active. Is there any convenient way that I can only set the tab title had been clicked active so that only one button will be highlighted?

cferdinandi commented 7 years ago

No way around this, sorry.