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

Answer 2

稍微肮脏的黑客，但它会在任何地方工作（不要忘记添加课程＆＃39;禁用＆＃39;到

标签）

    $("[data-tabs] > li.disabled a").bind("click", function(e)
    {
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();
    });

Answer 3

您可以将自定义链接类设置为仅通过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>

默认情况下，基金会使用tabs-title作为链接类，但您可以覆盖它。在此示例中，我使用enabled仅定位启用的标签。基金会将忽略没有enabled类的标签。

您可能还想在禁用的标签页上禁用指针事件，以便用户不会认为他们可以与已停用的标签页进行交互。

.tabs li:not(.enabled) a {
  pointer-events: none;
}

在zurb foundation中禁用选项卡

3 个答案: