Disable tab in zurb foundation - zurb-foundation

Question

I'm using Zurb Foundation and have the following html:
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title>Tab 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Tab 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
Is it posible to disable second tab? Tab button should be visble, but not clickable.

Answer 1

You could add some CSS to disable it.
.disabled {
pointer-events: none;
cursor: default;
}
Edit
With respect to Dolondro's comment and pointer events not working in IE, see css 'pointer-events' property alternative for IE

Answer 2

slightly dirty hack, but it will work everywhere (don't forget to add class 'disabled' to the tag)
$("[data-tabs] > li.disabled a").bind("click", function(e)
{
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
});

Answer 3

You can set a custom link class to only consider enabled tabs via data-link-class and then use the specified class only the enabled tabs.
<ul class="tabs" data-tabs data-link-class="enabled" id="disabled-tabs">
<li class="enabled"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
</ul>
By default, foundation uses tabs-title for the link class, but you can override it. In this example, I'm using enabled to only target enabled tabs. Foundation will ignore the tabs without the enabled class.
You'll probably also want to disable pointer events on the disabled tabs so that the user doesn't think they can interact with the disabled tab.
.tabs li:not(.enabled) a {
pointer-events: none;
}