Jump to content


Recommended Posts

My board is here.


So, I'm looking to make my site's skin more accessible, and part of this includes a new tab system. What I'm attempting to do (following this tutorial) and have mostly succeeded with is allowing people to tab through the tabs (hah) and use enter key to switch to a tab. I'm also looking to let the user use their arrow keys to automatically switch through the tabs as well. Tab/enter key works fine, but the second I try to use the arrow key method is where the code is going haywire.


If I use the arrow keys, it appears as if all the tabs are selected except the one that was navigated away from. The "focused" tab then becomes the last tab in the list, and the displayed content becomes the first tab. Needless to say it's not doing what it's supposed to, and I'm unsure of how to fix it. On the tutorial linked above, you can see that using the arrow keys automatically switches between the tabs as intended (or seems to, there's only two tabs there, compared to my 5-6)


Here's the js I'm using:

  $("#sidebar li[role='tab']").click(function(){
	$("#sidebar li[role='tab']:not(this)").attr("aria-selected","false");
 	//$("#sidebar li[role='tab']").attr("tabindex","-1");
  var tabpanid= $(this).attr("aria-controls");
   var tabpan = $("#"+tabpanid);
$("#sidebar div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
$("#sidebar div[role='tabpanel']:not(tabpan)").addClass("hidden");

//tabpan.className = "panel";
  //This adds keyboard accessibility by adding the enter key to the basic click event.
  $("#sidebar li[role='tab']").keydown(function(ev) {
if (ev.which ==13) {
  //This adds keyboard function that pressing an arrow left or arrow right from the tabs toggel the tabs. 
   $("#sidebar li[role='tab']").keydown(function(ev) {
if ((ev.which ==39)||(ev.which ==37))  {
var selected= $(this).attr("aria-selected");
if  (selected =="true"){
	$("#sidebar li[aria-selected='false']").attr("aria-selected","true").focus() ;

  var tabpanid= $("#sidebar li[aria-selected='true']").attr("aria-controls");
   var tabpan = $("#"+tabpanid);
$("#sidebar div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
$("#sidebar div[role='tabpanel']:not(tabpan)").addClass("hidden");

//tabpan.className = "panel";



My tab css:

ul.controlList {
  list-style-type: none;

li[aria-selected='true'] {}

.panel[aria-hidden='true'] {
   display: none;
.panel[aria-hidden='false'] {

.hidden {display:none;}

.tablist {
    list-style: none outside none;
    margin: 0px;
    padding: 0px;
    display: block;
    background-color: #080808;
    border-bottom: 2px solid #1e2733;
    border-top: 3px solid #252d34;
    text-align: center;

.tabs {
    background-color: transparent;
    padding: 5px;

.tab {
    display: inline;
    border-bottom: none;
    cursor: pointer;
    padding: 0 4px;
    font-family: georgia, times, serif;
    text-transform: uppercase;
    color: #5b656d;

.tab:focus, .tab:active, .tab[aria-selected='true'] {
    color: #374C5D;

.panel {
    background-color: #121212;
    padding: 5px;


and the tab html:

<aside id="sidebar" role="complementary">

<ul class="tablist" role="tablist"> 
<li id="tab1" class="tab" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Welcome</li> 
<li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">Links</li> 
<li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Chat</li> 
<li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="0">Staff</li> 
<li id="tab5" class="tab" aria-controls="panel5" role="tab" aria-selected="false" tabindex="0">©</li> 
<div class="tabs">
<div id="panel1" class="panel" aria-labelledby="tab1" role="tabpanel" aria-hidden="false"><% WELCOME %></div> 
<div id="panel2" class="panel" aria-labelledby="tab2" role="tabpanel" aria-hidden="true"><div class="sidelink"><% LINKS %></div></div>
<div id="panel3" class="panel" aria-labelledby="tab3" role="tabpanel" aria-hidden="true"><% CHAT %></div>
<div id="panel4" class="panel" aria-labelledby="tab4" role="tabpanel" aria-hidden="true"><% STAFF %></div>
<div id="panel5" class="panel" aria-labelledby="tab5" role="tabpanel" aria-hidden="true"><% CREDITS %></div>



Any help with this would be appreciated!

Link to comment
Share on other sites

  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
Search In
  • More options...
Find results that contain...
Find results in...
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.