首页 文章

在zurb foundation中禁用选项卡

提问于
浏览 次
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>

是否可以禁用第二个标签？标签按钮应该是可见的，但不可点击 .

zurb-foundation

3 回答

  • 0

    稍微肮脏的黑客，但它会在任何地方工作（不要忘记添加类'禁用'到

    • 标签）
    $("[data-tabs] > li.disabled a").bind("click", function(e)
    {
        e.preventDefault();
        e.stopImmediatePropagation();
        e.stopPropagation();
    });
    回复于
  • 2

    你可以添加一些CSS来禁用它 .

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

    Edit

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

    回复于
  • 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>

    默认情况下，Foundation使用 tabs-title 作为链接类，但您可以覆盖它 . 在此示例中，我使用 enabled 仅针对启用的选项卡 . 如果没有 enabled 类，Foundation将忽略这些选项卡 .

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

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

相关问题