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

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>