Question

How to tab between divs? I’m trying to tab between divs to use as a selection option of panels. When tabbed on a particular div panel, its border should be become active. Its not working and only tab at the browser level. Here’s what I’m tried so far..

   <script type="text/javascript">
       $(document).ready(function()
       {   
            $("div").keydown(function(e) 
            {
                if (e.which == 9) 
            {
                      $(this).css("border","4px solid gray");
            }
            });
       });
    </script>

    <div id="north"></div>
<div id="west"></div>
<div id="center"></div> 

Answer 1

I suppose you could do something like this:

$(document).ready(function() {

    // ids of divs you want to cycle through
    var divs = ["north", "west", "center"];
    var startIndex = 0;


    $(document).keydown(function(e) {
        if (e.which == 9) {

            // remove previously applied border
            $("div").css("border", "");
            $("#" + divs[startIndex]).css("border", "4px solid gray");
            startIndex++;

            // reset to first one
            if(startIndex === divs.length) {
                startIndex = 0;                   
            }
        }

        // prevent "tabbing out" of the document view
        return false;
    });
});​

Demo. (make sure to click on the rendered page area beforehand)