Отменить переключение клавишами по tabs?

400
31 августа 2018, 01:40

Не могу понять как отключить переключение между табами клавиатурой? Свойство 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>

READ ALSO
Отправка файлов через FormData

Отправка файлов через FormData

Не получается отправить файл на сервер, используя ajax, объект FormDataФункция ajax в javascript вызывает ошибку 404

211
Пересчет координат вершин объекта

Пересчет координат вершин объекта

Ориентируясь на пример кода из ответа Немного поэкспериментировал с кодом, я рассеял точки по экрану

149
Карусель со скроллбаром

Карусель со скроллбаром

Подскажите, как сделать скроллбар для каруселиЧтобы скролл реагировал когда переключаешь изображения

199
Реальный приоритет инкремента/декремента

Реальный приоритет инкремента/декремента

Собственно вот в чём вопрос: если верить https://developermozilla

143