RobyRen

成长历程，一步一个脚印！

DIV方向键控制选项

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>.
    <style>
        .divstyle{background:#f4f4f4;color:blue;}
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">  
        var currentLine=-1; 
        document.onkeydown=function(e)    
        { 
            e=window.event||e; 
            switch(e.keyCode)    
            { 
                case 38: //上方向键
                    currentLine--; 
                    changeItem(); 
                    break; 
                case 40: //下方向键
                    currentLine++; 
                    changeItem(); 
                    break; 
                default: 
                    break;
            } 
        }
           
        function changeItem()
        {
            var txtValue=document.getElementById("txtvalue");
            var divAll=document.getElementById("divAll");
            var subdiv=divAll.getElementsByTagName("div");
            for(var i=0;i<subdiv.length;i++)
            {
                $(subdiv).get(i).className="";
            }
            if(currentLine<0)
            {
                currentLine=subdiv.length-1;
            } 
            if(currentLine==subdiv.length)
            {
                currentLine=0;
            } 
            $(subdiv).get(currentLine).className="divstyle"; 
            txtValue.innerHTML = $(subdiv).get(currentLine).innerText;//取值
         }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divAll">
        <div>我是第1个DIV</div>
        <div>我是第2个DIV</div>
        <div>我是第3个DIV</div>
        <div>我是第4个DIV</div>
        <div>我是第5个DIV</div>
        <div>我是第6个DIV</div>
        <div>我是第7个DIV</div>
        <div>我是第8个DIV</div>
        <div>我是第9个DIV</div>
        <div>我是第10个DIV</div>
    </div>
    值为：<span id="txtvalue" style="background:#EAEAEA;"></span>
    </form>
</body>
</html>

posted on 2009-09-19 12:16  イモツホヌ  阅读(501)  评论(0)    收藏  举报

导航