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 >
		<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>
时间： 2024-10-16 21:56:56

JavaScript实现Div二级联动效果（响应键盘按钮）的相关文章

JavaScript实现省市二级联动

    JavaScript实现省市二级联动 展示一下效果? 当我鼠标点击前面的省那一栏的时候后面市那一栏会出现相对应的下辖市 实现思路 1. 添加相对应的select容器 2. 然后添加数据 3. 将相应的数据赋值给对应的option控件 方法的讲解 Function()函数 onchange();改变事件 笔者在这里写了一个关于河南与河北的简单联动   省市联动 <body> <select id="province"></select>省 &l

springboot查询数据库，js实现二级联动效果

1.数据库设计 实现oracle,mysql不同数据库链接不同的数据类型 2.在跳转到添加页面的时候,去数据库查询parent_id=0的数据,存入modelMap中带入add.html页面 @GetMapping("/add") public String add(ModelMap mmap) { //查询数据库类型,返回oracle和mysql等数据库 List<DatabaseVo> databaseVo = matedataService.selectDatabas

使用Javascript来实现二级联动菜单的效果

效果图如下: 具体实现步骤如下: 1.所用js代码如下: <script type="text/javascript"> var arr_province=["请选择省份/城市","北京市","上海市","天津市","河南省","山东省","河北省"]; var arr_city=[ ["请选择城市/地区"], [&

一个简单的二级联动效果，看完之后立马你也可以写一个（有源码，纯js，带注释）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择</title> <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1

JavaScript 实现简单二级联动

<body> 省份: <select id="province"> <option value="">请选择</option> <option value="吉林省">吉林省</option> <option value="辽宁省">辽宁省</option> <option value="山东省">山

美团HD(4)-二级联动效果

DJNavDropView.m #import "DJNavDropView.h" #import "DJCategory.h" #import "DJNavMainCategoryCell.h" #import "DJNavSubCategoryCell.h" @interface DJNavDropView()<UITableViewDataSource,UITableViewDelegate> /** 主分类

jQuery动态绑定事件（简单模拟二级联动效果）

绑定事件:$("#leyangjun").bind("change",function(){ jquery 给标签赋值:$('#leyangjun').text('好一朵美丽的茉莉花'); 清空表单值:$("#leyangjun").empty(); radio取值:$("input[name='radioName'][checked]").val(); <!DOCTYPE html PUBLIC "-//W3

简单得二级联动

<!--/*--><!--* Created by sincere丶胡(weibo) on 2017/6/28.--><!--*/--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>yadi</title> <meta name="viewport&quo

js实现菜单二级联动

代码如下,以便自己以后方便查阅: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>菜单二级联动效果</title> <