利用標籤模板來實現 自動選項卡的功能
<!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>