使用选项卡上的键取消切换？

Question

我不知道如何关闭键盘键上的选项卡之间的切换？出于某种原因，data-wrap-on-keys = "false" 属性不起作用。也许有人运行喜欢它？我只是需要切换键盘没有用

$(document).ready(function () {
  $(document).foundation();
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell medium-3">
      <ul class="vertical tabs" data-tabs id="example-tabs" data-wrap-on-keys="false">
        <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
        <li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
        <li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
        <li class="tabs-title"><a href="#panel4v">Tab 4</a></li>
        <li class="tabs-title"><a href="#panel5v">Tab 5</a></li>
        <li class="tabs-title"><a href="#panel6v">Tab 6</a></li>
      </ul>
    </div>
    <div class="cell medium-9">
      <div class="tabs-content" data-tabs-content="example-tabs">
        <div class="tabs-panel is-active" id="panel1v">
          <p>One</p>
          <p>Check me out! I'm a super cool Tab panel with text content!</p>
        </div>
        <div class="tabs-panel" id="panel2v">
          <p>Two</p>
          <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
        </div>
        <div class="tabs-panel" id="panel3v">
          <p>Three</p>
          <p>Check me out! I'm a super cool Tab panel with text content!</p>
        </div>
        <div class="tabs-panel" id="panel4v">
          <p>Four</p>
          <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
        </div>
        <div class="tabs-panel" id="panel5v">
          <p>Five</p>
          <p>Check me out! I'm a super cool Tab panel with text content!</p>
        </div>
        <div class="tabs-panel" id="panel6v">
          <p>Six</p>
          <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以通过在初始化 foundation

之后调用 $('[data-tabs] *').off('keydown.zf.tabs')

$(document).ready(function () { $(document).foundation(); $('[data-tabs] *').off('keydown.zf.tabs') });

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script> <div class="grid-container"> <div class="grid-x grid-margin-x"> <div class="cell medium-3"> <ul class="vertical tabs" data-tabs id="example-tabs" data-wrap-on-keys="false"> <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li> <li class="tabs-title"><a href="#panel2v">Tab 2</a></li> <li class="tabs-title"><a href="#panel3v">Tab 3</a></li> <li class="tabs-title"><a href="#panel4v">Tab 4</a></li> <li class="tabs-title"><a href="#panel5v">Tab 5</a></li> <li class="tabs-title"><a href="#panel6v">Tab 6</a></li> </ul> </div> <div class="cell medium-9"> <div class="tabs-content" data-tabs-content="example-tabs"> <div class="tabs-panel is-active" id="panel1v"> <p>One</p> <p>Check me out! I'm a super cool Tab panel with text content!</p> </div> <div class="tabs-panel" id="panel2v"> <p>Two</p> <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg"> </div> <div class="tabs-panel" id="panel3v"> <p>Three</p> <p>Check me out! I'm a super cool Tab panel with text content!</p> </div> <div class="tabs-panel" id="panel4v"> <p>Four</p> <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg"> </div> <div class="tabs-panel" id="panel5v"> <p>Five</p> <p>Check me out! I'm a super cool Tab panel with text content!</p> </div> <div class="tabs-panel" id="panel6v"> <p>Six</p> <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg"> </div> </div> </div> </div> </div>

使用选项卡上的键取消切换？

Cancel switching by using the keys on tabs?

javascript

zurb-foundation