3

我正在使用 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>

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

4

3 回答 3

2

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

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

编辑

关于 Dolondro 的注释和指针事件在 IE 中不起作用，请参阅 IE 的css 'pointer-events' 属性替代项

于 2013-07-10T08:52:43.470 回答
0

有点脏的黑客，但它可以在任何地方工作（不要忘记将类“禁用”添加到

  • 标签）

        $("[data-tabs] > li.disabled a").bind("click", function(e)
    {
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();
    });
    • 于 2017-05-23T07:40:40.097 回答
    0

    您可以将自定义链接类设置为仅考虑启用的选项卡data-link-class，然后仅使用指定的类启用的选项卡。

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

    默认情况下，foundationtabs-title用于链接类，但您可以覆盖它。在此示例中，我enabled仅用于定位已启用的选项卡。Foundation 将忽略没有enabled类的选项卡。

    您可能还希望禁用禁用选项卡上的指针事件，以便用户不会认为他们可以与禁用选项卡交互。

    .tabs li:not(.enabled) a {
  pointer-events: none;
}
    于 2017-05-30T15:04:00.473 回答