標籤：back images oct log 函數 tom 技術分享 title block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<title>js函數</title>
</head>
<body>
<style>
#div0 div{
width: 100px;
background: red;
height: 100px;
border: 1px solid #b2b2b2;
margin-bottom: 10px;
display: none;
}
.active{
background:yellow;
}
</style>
<div id="div0">
<input type="button" value="新聞" class="active">
<input type="button" value="音樂">
<input type="button" value="遊戲">
<input type="button" value="廣告">
<div style="display: block;margin-top: 10px;">新聞</div>
<div>音樂</div>
<div>遊戲</div>
<div>廣告</div>
</div>
<script>
var div0=document.getElementById(‘div0‘)
var ainput=div0.getElementsByTagName(‘input‘);
var adiv1=div0.getElementsByTagName(‘div‘);
for(var i=0;i<ainput.length;i++){
ainput[i].index=i
ainput[i].onclick=function () {
for(var j=0;j<ainput.length;j++){
ainput[j].className=‘‘;
adiv1[j].style.display=‘none‘;
}
this.className=‘active‘
adiv1[this.index].style.display=‘block‘
}
}
</script>
</body>
</html>
原生js選項卡（代碼臨時儲存）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
