Disable tab in 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><a href="#panel1">Tab 1</a></p>
    <div class="content" data-section-content>
      <p>Content of section 1.</p>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#panel2">Tab 2</a></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.

score 2 · Answer 1 · edited May 23 '17 at 12:10

2

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

edited May 23 '17 at 12:10

Community

1
1

answered Jul 10 '13 at 08:52

r8n5n

2,059
17
23

As you're using Foundation 4, IE8 is out of the window anyway, but use of pointer events won't work in IE9 or IE10 either. http://caniuse.com/#feat=pointer-events – Doug Aug 20 '13 at 09:43
Good point, for info on pointer events in IE see http://stackoverflow.com/questions/5855135/css-pointer-events-property-alternative-for-ie – r8n5n Sep 06 '13 at 09:10
since i don't care much about IE, this was useful to me =) – semiomant May 26 '14 at 16:06

score 0 · Answer 2 · answered May 23 '17 at 07:40

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();
    });

score 0 · Answer 3 · answered May 30 '17 at 15:04

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;
}

Disable tab in zurb foundation

3 Answers3