Menu icon Foundation
Tabs: one list item is reload url btn

Developers,

I like the way Tabs.js works, very easy to customize and create vertical, horizontal and even include accordions inside each tab-section but I've got one little thing I would like to tackle.

I've added one extra list item ( 3rd btn ) that should work as a refresh-/reload of the page. It's just a clean URL but because it's inside the data-tab Foundation thinks it's part of a tab-section.

How can I kill that one link and make it work like any other link on a website?

Probably adding an extra class to that specific item but how can I add that class to the tabs.js

Schermafbeelding 2014 01 23 om 14.55.39

<nav class="tabs" data-tab>
    <ul id="ptlew">
		<li class="active"><a href="#panel1-1">Topics</a></li>
		<li><a href="#panel1-2">Replies</a></li>
		<li><a href="http://example.com/page/" title="Refresh"><i class="fi fi-refresh"></i></a></li>
	</ul>
</nav>

            

         

tabs

Developers,

I like the way Tabs.js works, very easy to customize and create vertical, horizontal and even include accordions inside each tab-section but I've got one little thing I would like to tackle.

I've added one extra list item ( 3rd btn ) that should work as a refresh-/reload of the page. It's just a clean URL but because it's inside the data-tab Foundation thinks it's part of a tab-section.

How can I kill that one link and make it work like any other link on a website?

Probably adding an extra class to that specific item but how can I add that class to the tabs.js

Schermafbeelding 2014 01 23 om 14.55.39

<nav class="tabs" data-tab>
    <ul id="ptlew">
		<li class="active"><a href="#panel1-1">Topics</a></li>
		<li><a href="#panel1-2">Replies</a></li>
		<li><a href="http://example.com/page/" title="Refresh"><i class="fi fi-refresh"></i></a></li>
	</ul>
</nav>

            

         

Fredric Tillberg gave the most helpful answer for this post
Fredric Tillberg almost 6 years ago

I don't know whether you've changed any of the original Javascript - however, looking at the code I suppose that:

 $(this.scope).off('.tab').on('click.fndtn.tab', '[data-tab] > dd > a', function (e) {

... could be changed to:

 $(this.scope).off('.tab').on('click.fndtn.tab', '[data-tab] > dd > a:not(.refreshbtn)', function (e) {

Then append the "refreshbtn" class to your refresh tab's anchor tag.

<li><a class="refreshbtn" href="http://example.com/page/" title="Refresh"><i class="fi fi-refresh"></i></a></li>

This post has been closed. No new replies can be added.

Fredric Tillberg almost 6 years ago

I don't know whether you've changed any of the original Javascript - however, looking at the code I suppose that:

 $(this.scope).off('.tab').on('click.fndtn.tab', '[data-tab] > dd > a', function (e) {

... could be changed to:

 $(this.scope).off('.tab').on('click.fndtn.tab', '[data-tab] > dd > a:not(.refreshbtn)', function (e) {

Then append the "refreshbtn" class to your refresh tab's anchor tag.

<li><a class="refreshbtn" href="http://example.com/page/" title="Refresh"><i class="fi fi-refresh"></i></a></li>

Shmoo almost 6 years ago

Thank you,

That works perfectly!