/    Sign up×
Community /Pin to ProfileBookmark

Using the Tab Key to toggle or switch jQuery UI Tabs…

Copy linkTweet thisAlerts:
Jun 30.2015

Hello Folks,

I would like to add tab key navigation for the tab headings for a jQuery UI tab implementation.

I tried added [B]tabindex[/B] but this doesn’t work. See my code below, what can I do to enable tab key navigation on the tab headings?

Thanks.

[code=html]
<div id=”tabs”>
<ul>
<li><a href=”#tabs-1″ title=”First Tab” tabindex=”0″>First Tab</a></li>
<li><a href=”#tabs-2″ title=”Second Tab” tabindex=”0″>Second Tab</a></li>
</ul>
<div id=”tabs-1″>
<p>First Tab Content.</p>
</div>
<div id=”tabs-2″>
<p>Second Tab Content.</p>
</div>
</div>

<script type=”text/javascript”>
$(document).ready(function () {
$(“#tabs”).tabs({
});
});
</script>
[/code]

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@DeeppurpleOct 06.2015 — Hello Folks,

I would like to add tab key navigation for the tab headings for a jQuery UI tab implementation.

I tried added [B]tabindex[/B] but this doesn't work. See my code below, what can I do to enable tab key navigation on the tab headings?

Thanks.

[code=html]
<div id="tabs">
<ul>
<li><a href="#tabs-1" title="First Tab" tabindex="0">First Tab</a></li>
<li><a href="#tabs-2" title="Second Tab" tabindex="0">Second Tab</a></li>
</ul>
<div id="tabs-1">
<p>First Tab Content.</p>
</div>
<div id="tabs-2">
<p>Second Tab Content.</p>
</div>
</div>

<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs({
});
});
</script>
[/code][/QUOTE]

may be you can try "data-tab" attribute
Copy linkTweet thisAlerts:
@xelawhoOct 06.2015 — doesn't seem to make much sense when you can navigate with the arrows, but anyway...
[CODE]
$(document).ready(function() {
$("#tabs").tabs({});
$(document).keydown(function(e) {
if (e.keyCode === $.ui.keyCode.TAB) {
$("#tabs").tabs("option", "active", $("#tabs").tabs('option', 'active') + 1);
}
});
});
[/CODE]
Copy linkTweet thisAlerts:
@codesokOct 06.2015 — cool may be you can try "data-tab" attribute[/QUOTE]
Copy linkTweet thisAlerts:
@SempervivumOct 06.2015 — I would like to add tab key navigation[/QUOTE]Unfortunately I don' get your point: Do you want to switch from one item to the next by pressing the tab key or do you want to navigate through the items by the arrow keys or do you want to select specific items by pressing the number keys?
×

Success!

Help @ckkoeber spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...