<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.4.js"></script>
<script>
window.οnlοad=function(){
var otab=document.getElementById('tab');
var oinput=otab.getElementsByTagName('input');
var odiv=otab.getElementsByTagName('div');
for(i=0;i<oinput.length;i++)
{
oinput[i].index = i;
oinput[i].οnclick=function(){
for (var i = 0; i < oinput.length; i++) {
oinput[i].className='';
odiv[i].style.display='none';
};
this.className='active';
odiv[this.index].style.display='block';
};
}
}
</script>
<style>
#tab div{
width: 150px;
height: 100px;
display: none;
border: 1px solid blue;
}
.active{
background: red;
}
</style>
</head>
<body>
<div id="tab">
<input type="button" value="aaa" class="active">
<input type="button" value="bbb">
<input type="button" value="ccc">
<div style="display:block">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</body>
</html>
原生js写tab
最新推荐文章于 2024-07-22 09:52:49 发布