Question

如何修改JQuery UI选项卡，以便我的用户可以使用tab和shift / tab来浏览它们，就像它们可以在页面的其余部分一样？而不是需要使用箭头键。

我正在使用jQuery UI v1.10.3

这是我的代码，它基本上就是他们网站上的例子：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#tabs" ).tabs({
        event: "click"
    });
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1</p>
  </div>
  <div id="tabs-2">
    <p>Tab 2</p>
  </div>
  <div id="tabs-3">
    <p>Tab 3</p>
  </div>
</div>

</body>
</html>

我需要修改它，以便用户可以选项卡选择选项卡，而不是使用箭头键。我几乎可以通过添加：

到达那里

$('ul.ui-tabs-nav>li,ul.ui-tabs-nav>li>a').removeAttr("tabindex");

但我不知道这是否是最佳解决方案，我需要在每次选择标签时运行，而不仅仅是在页面加载时。

修改JQuery UI选项卡以通过选项卡进行选项卡

0 个答案: