基于javascript实现最简单的选项卡切换效果
本文实例为大家分享了js选项卡切换效果的具体实现代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="gb2312"/>
<title>朱朱制作</title>
<scriptsrc="js/jquery.js"type="text/javascript"></script>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:#fff;
font-family:"微软雅黑";
font-size:18px;
width:1000px;
margin:50pxauto;
color:#000000;
}
.wrapper{
width:350px;
}
#navul{
border-bottom:2pxsolidyellowgreen;
height:32px;
}
#navli{
display:inline-block;
border:2pxsolid#999;
border-bottom:none;
margin-left:10px;
width:65px;
text-align:center;
line-height:30px;
}
#navli:hover{
cursor:pointer;
}
#content{
display:block;
border:1pxsolidblue;
border-top:none;
text-align:center;
height:100px;
line-height:100px;
}
#navli.on{
border-bottom:solid2px#ffffff;
}
.hide{
display:none;
}
.show{
display:block;
}
</style>
</head>
<scripttype="text/javascript">
/*window.onload=change;//js代码实现
functionchange(){
this.nav=document.getElementById("nav");
this.li=nav.getElementsByTagName("li");
this.cont=document.getElementById("content");
this.divi=cont.getElementsByTagName("div");
for(vari=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
for(vari=0;i<li.length;i++){
li[i].className="";
divi[i].className="hide";
}
li[this.index].className="on";
divi[this.index].className="show";
}
}
}*/
$(function(){
$('#navli').each(function(){
$(this).click(function(){
$('#navli').removeClass("on");
$(this).addClass("on");
$("#contentdiv").removeClass();
$("#contentdiv").eq($(this).index()).addClass("show").siblings().addClass("hide");
})
})
})
</script>
<body>
<divclass="wrapper">
<divid="nav">
<ul>
<liclass="on">num1</li>
<li>num2</li>
<li>num3</li>
<li>num4</li>
</ul>
</div><divid="content">
<divclass="show">content1</div>
<divclass="hide">content2</div>
<divclass="hide">content3</div>
<divclass="hide">content4</div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。