首页 > 代码库 > JavaScript实现Div二级联动效果（响应键盘按钮）
JavaScript实现Div二级联动效果（响应键盘按钮）
最近在学习javascript，给了一个题目给我，写一个二级联动效果。当做练习。
写一个二级联动的HTML页面，具体要求如下：
1、页面支持通过键盘上的上下左右键实现焦点的移动
2、页面左侧为父栏目名称，如电影、电视剧、体育、音乐、少儿、综艺、咨询等
3、焦点在对应父栏目上时，展示子栏目信息，如电影栏目下有1,2，3,4,5等子栏目；
4、页面数据为静态数据，可以配置修改；
效果：
<html>
<head>
<title>二级联动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#content {float: left;width:510px;}
#left {float: left;width:200px;height: 500px;}
#left .left_item {float:left;width:180px;height:50px;margin:10px;margin-bottom:0px;background: #ABCDEF;text-align: center;line-height: 50px;}
#right {float: right;width:300px;height: 500px;}
#right .right_items{float:left;width: 300px;height:500px;display: none;}
#right .right_items .left_item{float:left;width:180px;height:50px;margin:10px;margin-bottom:0px;background: #ABCDEF;text-align: center;line-height: 50px;}
</style>
<script>
var t = ["电影","电视剧","体育","音乐","少儿"];
var obj = new Array();
var objtwo = new Array(new Array(),new Array(),new Array(),new Array(),new Array());
var objtt = new Array();
function initDiv() {
var left = document.getElementById("left");
var right = document.getElementById("right");
var leftdivs = left.getElementsByTagName("div");
var rightdivs = right.getElementsByTagName("div");
//console.log(rightdivs);
for (var i = 0 ; i < leftdivs.length;i++) {
obj[i] = leftdivs[i];
obj[i].innerHTML = t[i];
obj[0].focus();
obj[0].style.background = "#ff33ff";
}
for (var i = 0 ; i < rightdivs.length;i++) {
objtt[i] = rightdivs[i];
for (var j = 0 ; j < objtt[i].getElementsByTagName("span").length; j++){
objtwo[i][j] = objtt[i].getElementsByTagName("span")[j];
}
}
}
function test(event,num) {
switch (event.keyCode) {
case 38:
if (num-1 >= 0) {
obj[num].style.background = "#ABCDEF";
obj[num-1].style.background = "#ff33ff";
obj[num-1].focus();
objtt[num].style.display = "none";
objtt[num-1].style.display = "block";
}
break;
case 39:
console.log("39");
objtwo[num][0].focus();
objtwo[num][0].style.background = "#ff33ff";
break;
case 40:
if (num+1 <= 4) {
obj[num].style.background = "#ABCDEF";
obj[num+1].style.background = "#ff33ff";
obj[num+1].focus();
objtt[num].style.display = "none";
objtt[num+1].style.display = "block";
}
break;
}
};
function test2(event,num,n) {
switch (event.keyCode) {
case 37:
console.log("37");
obj[num].focus();
obj[num].style.background = "#ff33ff";
objtwo[num][n].style.background = "#ABCDEF";
break;
case 38:
if (n-1 >= 0) {
console.log(objtwo[num][n]);
objtwo[num][n].style.background = "#ABCDEF";
objtwo[num][n-1].style.background = "#ff33ff";
objtwo[num][n-1].focus();
}
break;
case 40:
if (n+1 <= 4) {
console.log(objtwo[num][n]);
objtwo[num][n].style.background = "#ABCDEF";
objtwo[num][n+1].style.background = "#ff33ff";
objtwo[num][n+1].focus();
}
break;
}
};
</script>
</head>
<body onload="initDiv()">
<div id="content">
<div id="left"><!--contenteditable="true" -->
<div class="left_item" tabIndex="1" onkeyDown="test(event,0)"></div>
<div class="left_item" tabindex="1" onkeyDown="test(event,1)"></div>
<div class="left_item" tabindex="1" onkeyDown="test(event,2)"></div>
<div class="left_item" tabindex="1" onkeyDown="test(event,3)"></div>
<div class="left_item" tabindex="1" onkeyDown="test(event,4)"></div>
</div>
<div id="right">
<div class="right_items" name="right_items" style="display:block;">
<span class="left_item" tabIndex="1" onkeyDown="test2(event,0,0)">1</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,0,1)">1</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,0,2)">1</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,0,3)">1</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,0,4)">1</span>
</div>
<div class="right_items" name="right_items">
<span class="left_item" tabIndex="1" onkeyDown="test2(event,1,0)">2</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,1,1)">2</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,1,2)">2</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,1,3)">2</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,1,4)">2</span>
</div>
<div class="right_items" name="right_items">
<span class="left_item" tabIndex="1" onkeyDown="test2(event,2,0)">3</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,2,1)">3</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,2,2)">3</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,2,3)">3</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,2,4)">3</span>
</div>
<div class="right_items" name="right_items">
<span class="left_item" tabIndex="1" onkeyDown="test2(event,3,0)">4</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,3,1)">4</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,3,2)">4</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,3,3)">4</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,3,4)">4</span>
</div>
<div class="right_items" name="right_items">
<span class="left_item" tabIndex="1" onkeyDown="test2(event,4,0)">5</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,4,1)">5</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,4,2)">5</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,4,3)">5</span>
<span class="left_item" tabindex="1" onkeyDown="test2(event,4,4)">5</span>
</div>
</div>
</div>
</body>
</html>本文出自 “橙子的成长记录” 博客，请务必保留此出处http://azhome.blog.51cto.com/9306775/1549196
JavaScript实现Div二级联动效果（响应键盘按钮）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。