<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#Div {
width: 400px;
}
.taxon {
background: red;
}
</style>
</head>
<body>
<div id="Div"></div>
<script>
//js代码。
function switcHover(cLass, butL, divL) {
//获取到最外层的的元素。
var outerDiv = document.getElementById('Div');
//新建一个Div元素,用来盛放button元素。
var newDiv = document.createElement('div');
//通过循环决定新建多少button元素。
for (var j = 0; j < butL.length; j++) {
var newButton = document.createElement('button');
//给button元素设置样式
newButton.style.width = '80px';
newButton.style.height = '40px';
newButton.innerHTML = butL[j]
//把建好的botton元素添加到新建的Div元素中
newDiv.append(newButton);
//通过自执行函数来进行记录的步骤。传两个值,一个为下标,另一个为类名。
(function (j, cLass) {
//获取button元素以及div元素的集合。
var buttonGather = document.getElementsByTagName('button');
var divGather = document.getElementsByTagName('div');
//点击事件。注意是给新建的button元素添加点击事件。
newButton.onclick = function () {
//通过循环清除类以及隐藏。
for (var k = 0; k < buttonGather.length; k++) {
buttonGather[k].className = '';
//因为添加好的div元素比button元素多两个。所以取对应的元素就需要下标+2.
divGather[k + 2].style.display = 'none'
}
//加类以及显示。
buttonGather[j].className = cLass;
divGather[j + 2].style.display = 'block'
}
})(j, cLass)
//把处理好的div元素添加到最外层元素中
outerDiv.append(newDiv);
}
//通过循环决定新建几个div。建议和button元素一致。以用来点击切换对应的元素。
for (var i = 0; i < divL.length; i++) {
var _newDiv = document.createElement('div');
//设置样式
_newDiv.style.width = '100%';
_newDiv.style.height = '100px';
_newDiv.style.background = 'blue';
_newDiv.innerText = divL[i];
//默认为隐藏,点击的时候出现
_newDiv.style.display = 'none';
//把新建好的div添加到最外层的div中(自行选择添加到那个div中)
outerDiv.append(_newDiv);
}
}
switcHover('taxon', [11, 22, 33], ['Hello', 'Word', 'Good']);
</script>
通过操作Dom实现tab切换
猜你喜欢
转载自blog.csdn.net/weixin_45050636/article/details/90181792
今日推荐
周排行