如何修改 JQuery UI 选项卡,以便我的用户可以使用选项卡和 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");
但我不知道这是否是最好的解决方案,我需要在每次选择选项卡时运行它,而不仅仅是在页面加载时运行。