基于JavaScript实现Tab选项卡切换效果
本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
.box{
width:500px;
height:400px;
border:1pxsolid#ccc;
margin:100pxauto;
overflow:hidden;
}
ul{
width:600px;
height:40px;
margin-left:-1px;
list-style:none;
}
li{
float:left;
width:101px;
height:40px;
text-align:center;
font:60018px/40px"simsun";
background-color:pink;
cursor:pointer;
}
span{
display:none;
width:500px;
height:360px;
background-color:yellow;
text-align:center;
font:700150px/360px"simsun";
}
.show{
display:block;
}
.current{
background-color:yellow;
}
</style>
<script>
window.onload=function(){
varboxArr=document.getElementsByClassName("box");
for(vari=0;i<boxArr.length;i++){
fn(boxArr[i]);
}
functionfn(ele){
varliArr=ele.getElementsByTagName("li");
varspanArr=ele.getElementsByTagName("span");
for(vari=0;i<liArr.length;i++){
liArr[i].index=i;
liArr[i].onmouseover=function(){
for(varj=0;j<liArr.length;j++){
liArr[j].className="";
spanArr[j].className="";
}
this.className="current";
spanArr[this.index].className="show";
}
}
}
}
</script>
</head>
<body>
<divclass="box">
<ul>
<liclass="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<spanclass="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
<divclass="box">
<ul>
<liclass="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<spanclass="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
<divclass="box">
<ul>
<liclass="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裤子</li>
<li>裙子</li>
</ul>
<spanclass="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裤子</span>
<span>裙子</span>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。