如何在div之间切换? [英] how to tab between divs?

问题描述

如何在div之间切换?我正在尝试在div之间切换以用作面板的选择选项.当在特定的div面板上选项卡上时，其边框应处于活动状态.它不能正常工作，只能在浏览器级别使用标签页.到目前为止，这是我尝试过的方法.

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> 

推荐答案

我想您可以做这样的事情:

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)

这篇关于如何在div之间切换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！