zurb-foundation - 在 zurb foundation 中禁用选项卡

Question

我正在使用 Zurb Foundation 并具有以下 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>

是否可以禁用第二个标签？选项卡按钮应该可见，但不可点击。

Answer 1

您可以添加一些 CSS 来禁用它。

.disabled {
   pointer-events: none;
   cursor: default;
}

编辑

关于 Dolondro 的注释和指针事件在 IE 中不起作用，请参阅 css 'pointer-events' property alternative for IE