利用标签模板来实现 自动选项卡的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=a, initial-scale=1.0"> -->
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}
.outNode>div{
width: 200px;
height: 200px;
background-color: pink;
color:darkred;
border:solid 1px black;
display: none;
}
.outNode>div:first-of-type{
display: block;
}
</style>
</head>
<body>
<script type="text/javascript">
// $ 函数名
// obj 函数参数
// ... 扩展运算符
// 以数组的形式，把我选中的东西全部选中
// querySelectorAll 选择符合 obj 这个参数的元素数组
$=obj=>[...document.querySelectorAll(obj)];
// json数据
const jsonData={
'valueName':['选项1','选项2','选项3'],
'innerHtml':['内容层1','内容层22','内容层333']
}
// 遍历json.valueName.map
// 根据jsonData 来创建节点
// <div class="outNode"><input type=button value='选项1'></div>
const createNode=json=>`<div class="outNode">
${json.valueName.map((x)=>`<input type=button value=${x}>`).join('')}
${json.innerHtml.map((x)=>`<div>${x}</div>`).join('')}
</div>`;
// 调用创建节点的method
document.body.innerHTML = createNode(jsonData);
// 点击以后，去掉所有的div
let allInput = new Set($('input'));
let allDiv = new Set($('.outNode>div'));
// 给三个按钮绑定 click 事件
[...allInput].forEach((x,y)=>{
x['onclick']=()=>{
//alert(123);
// 遍历三个div 全部隐藏
[...allDiv].forEach((ddiv)=>{
ddiv.style.display="none";
});
// 只显示该切换到的那个div
[...allDiv][y].style.display='block';
}
})
</script>
</body>
</html>