右边的具体数据局部

var li_sum=$("#div_dh ul").find("li").size();
                    $("#div_dh").find("li").each(function(li) {
                   $(this).find("a")
                                .attr("tabindex", li * 10 + baseIndex).attr("my_li",li )
                                .addClass("cGridInputs");
                 //alert("当前位置:"+li+"列");

});//li==结束位置

if(my_dz==0){
                   $(".cGridInputs[tabindex=" + 10 + "]").focus() ;
}

$("#div_dh .cGridInputs").keydown( function(evt) {
   var tabIndex = parseInt($(this).attr("tabindex"));
  var my_lis = parseInt($(this).attr("my_li"));
    switch (evt.which) {
   case 40: //下---------------------
      if( my_lis==9){//最后一个
    return;
  }
      my_lis++;
        tabIndex = my_lis*10+ baseIndex;
                    break;
case 38: //上---------------------
        if( my_lis==0){//第一个
    return;
  }
      my_lis--;
        tabIndex = my_lis*10+ baseIndex;
 break;
case 39: //右---------------------
   //   $(".cGridInput[tabindex=" + 10 + "]").blur();
      my_dz=1;
 break;
   case 13:
    /*  alert("确定进入所选菜单--坐标:"+my_lis);
  var url= $("ul li:eq("+my_lis+")").find("a").attr("href");
  alert("菜单链接: "+url);
  window.location.href=url;*/
break;
 
   };
if(my_dz==0){    
   $(".cGridInputs[tabindex=" + tabIndex + "]").focus() ;
      var distance =  my_lis*(40+0)+50+'px';
         $('.lanrenzhijia .hover').stop().animate({top:distance},150);
}
    if(my_dz==1){

$(".cGridInputs[tabindex=" + tabIndex + "]").blur();
   zt_method();  //  当点击右时，从左边将移动到右边，调用右边移动的函数
return;

}

});
};

function zt_method(){
alert("主体加载");
 var baseIndex = 10;//初始值
var my_list;
 var my_li;
 var arrays = [];
 var my_dz=0;
  var rows=$("#list ").size();//总行数
   $("#list ").each(function(list) {
      
arrays.push({"list":list,"li":  $(this).find("li").size()});
// alert("list-第: "+list+"行;"+"li-总："+$(this).find("li").size()+"张");
      $(this).find("li").each(function(li) {
  $(this).find("img")
               .attr("tabindex", list * 10 + li + baseIndex).attr("my_list", list ).attr("my_li",li )
  .addClass("cGridInput");
//  alert("当前位置:"+list+"行"+li+"列");

});//li==结束位置

});//子div==结束位置

if(my_dz==0){
$(".cGridInput[tabindex=" + 10 + "]").focus();
$(".div_right #list:eq(0) li:eq(0)").addClass("mybg");
localStorage.clear();
}
    
$("#list .cGridInput").keydown( function(evt) {
   var tabIndex = parseInt($(this).attr("tabindex"));
var my_lists = parseInt($(this).attr("my_list"));
       var my_lis = parseInt($(this).attr("my_li"));
var column = 0;//列总数
               switch (evt.which) {
                case 38: //上---------------------
if ( my_lists == 0){
                          return;
  }
my_lists -= 1;
     $.each(arrays,function(index,value) {
 if(my_lists == value.list){
 column = value.li;
     return;
 }
      });
         
if (my_lis > column-1) {
                         my_lis = column-1;
                     }
  tabIndex =   my_lists * 10 +my_lis + baseIndex;
                    break;
                case 40: //下---------------------
                  
if (my_lists == rows-1) { //已经是最后一行
                         return;
                      }
my_lists   += 1;
$.each(arrays,function(index,value) {
 if(my_lists == value.list){
column = value.li; 
    return;
 }
      });
  
if (my_lis > column-1) {
                         my_lis = column-1;
                     }
          tabIndex =  my_lists * 10 +my_lis + baseIndex;
                    break;
                case 37: //左移---------------------
if (my_lists == 0 && my_lis == 0) {  //第一行第一个,跳转到菜单------------------------
   //跳到菜单---------------
my_dz=1;

//return;
                       }
  if(my_lis == 0){
  my_lists--;
 $.each(arrays,function(index,value) {
       if(my_lists == value.list){
       column = value.li; 
           return;
        }
             });
           
 my_lis=column-1; 
 tabIndex=tabIndex-10+my_lis;
  }else{
tabIndex--; 
my_lis--;
  }

break;
                case 39: //右---------------------
                        
$.each(arrays,function(index,value) {
 if(my_lists == value.list){
column = value.li;

return;
 }
      });
 
if (my_lists == rows-1 && my_lis == column-1) {  //最后行最后一个,跳转到第一个
                         my_lists =0 ;
my_lis= 0;
  break;
 
                       }
if(my_lis == column-1){
 my_lists++;
 my_lis=0; 
 
 tabIndex=tabIndex+10-(column-1);
 
  }
  else{ 
tabIndex++; 
my_lis++;
  }

break;

case 13:
      alert("确定进入观看--坐标:"+my_lists+"  ,  "+my_lis);
  var url= $("#div_index #list:eq("+my_lists+") li:eq("+my_lis+")").find("a").attr("href");
  alert("电影超链接: "+url);
  window.location.href=url;
break;
 
      };
     //改变选择的颜色--------------------------------
    if(my_dz==0){
    alert(my_lists+"行,列"+my_lis+"=="+tabIndex+"光标");
$(".div_right #list li").removeClass("mybg");
       $(".div_right #list:eq("+my_lists+") li:eq("+my_lis+")").addClass("mybg");
   $(".cGridInput[tabindex=" + tabIndex + "]").focus();
}
if(my_dz==1){
 $(".cGridInput[tabindex=" + tabIndex + "]").blur();
 $(".div_right #list li").removeClass("mybg");
 dh_method();
 return;
}

});//按键==结束位置
  };

5、个人总结与优化

这是一个页面的实现，框架与框架的嵌套布局，将分别写菜单的js与具体数据的js，关键在于跨页面的框架js之间的调用，正在完善一些问题。本人处学者，有问题就多交流