搜索到
1
篇与
tab
的结果
-
JavaScript实现tab键切换选项卡 JavaScript实现tab键切换选项卡{anote icon="fa-arrow-circle-right" href="http://www.000081.xyz/index.php/174-1.html" type="secondary" content="预览"/}重要的方法方法作用onclick添加点击触发事件onfocus获取焦点触发事件tabIndex添加tab键索引onblur离开焦点触发事件blur失去焦点focus设置焦点源代码<!DOCTYPE html> <html lang="zh"> <meta charset="utf8" /> <style> /* 大正方形的类 */ .box { width: 200px; height: 200px; position: absolute; float: left; line-height: 200px; text-align: center; font-size: 100px; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } /* 大正方形的类选择器 */ .box:nth-child(1) { background-color: red; } .box:nth-child(2) { display: none; background-color: wheat; } .box:nth-child(3) { display: none; background-color: blue; } .box:nth-child(4) { display: none; background-color: yellow; } /* 小正方形的类 */ .but { width: 50px; height: 50px; float: left; line-height: 50px; text-align: center; font-size: 25px; margin-top: 125px; } .but:nth-child(1) { background-color: red; } .but:nth-child(2) { background-color: wheat; } .but:nth-child(3) { background-color: blue; } .but:nth-child(4) { background-color: yellow; } .but:hover { background-color: black; color: white; } /* 最外层的，括起四个小正方形 */ ._div1 { width: 200px; height: 50px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } </style> <head> <title>tab切换选项卡</title> </head> <body> <div id="_div" class="_div"></div> <div id="_div1" class="_div1"></div> </body> <script> //当前索引号 var now_index = 0; var create_div = []; //给定时器加上线程锁 var next_tab = true; //颜色 var color_list = ["red", "wheat", "blue", "yellow"]; //大正方形的div var _div = document.getElementById("_div"); //小正方形的div var _div1 = document.getElementById("_div1"); //批量生成大小正方形 for (var i = 0; i <= 3; i++) { create_div[i] = document.createElement("div"); create_div[i + 4] = document.createElement("div"); create_div[i].className = "box"; create_div[i + 4].className = "but"; create_div[i].innerHTML = i + 1; create_div[i + 4].innerHTML = i + 1; //正方形获得焦点或者点击事件都会触发切换函数 create_div[i + 4].onclick = qiehuan; create_div[i + 4].onfocus = qiehuan; create_div[i + 4].onblur = qiehuan; //为4个小正方形添加tab键索引 create_div[i + 4].tabIndex = i + 1; //将生成的函数加入div _div.appendChild(create_div[i]); _div1.appendChild(create_div[i + 4]); } //取生成后的大小正方形 var __div = _div.getElementsByTagName("div"); var __div1 = _div1.getElementsByTagName("div"); //默认红色小正方形为选中状态 __div1[0].style.backgroundColor = "purple"; __div1[0].style.color = "white"; __div1[0].focus(); //切换函数代码 function qiehuan() { //取索引 var index = this.innerHTML - 1; //判断是否为定时器触发的切换 if (isNaN(index)) { //当索引值为最大时候自动跳回开始 if (now_index == 3) { now_index = -1; } //索引值为下一个 index = ++now_index; //获取当前焦点 __div1[index].focus(); } else { next_tab = false; } //全局变量索引为当前索引值 now_index = index; for (var i = 0; i <= 3; i++) { if (index == i) { __div1[i].style.backgroundColor = "purple"; __div1[i].style.color = "white"; __div[i].style.display = "block"; continue; } __div[i].style.display = "none"; __div1[i].style.backgroundColor = color_list[i]; __div1[i].style.color = "black"; } } //定时器 setInterval(() => { //当线程锁激活的时候跳过 if (next_tab) { qiehuan(); } //线程锁关闭 next_tab = true; }, 3000); </script> </html>
