基于javascript实现最简单的选项卡切换效果
编程学习 2021-07-04 21:05www.dzhlxh.cn编程入门
这篇文章主要介绍了基于javascript实现最简单的选项卡切换效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js选项卡切换效果的具体实现代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>朱朱制作</title>
<script src="js/jquery.js" type="text/javascript"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #fff;
font-family: "微软雅黑";
font-size: 18px;
width: 1000px;
margin: 50px auto;
color:#000000;
}
.wrapper{
width: 350px;
}
#nav ul{
border-bottom: 2px solid yellowgreen;
height: 32px;
}
#nav li{
display: inline-block;
border: 2px solid #999;
border-bottom: none;
margin-left: 10px;
width: 65px;
text-align: center;
line-height: 30px;
}
#nav li:hover{
cursor: pointer;
}
#content{
display: block;
border: 1px solid blue;
border-top: none;
text-align: center;
height: 100px;
line-height: 100px;
}
#nav li.on{
border-bottom: solid 2px #ffffff;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<script type="text/javascript">
/*window.onload=change; //js代码实现
function change(){
this.nav=document.getElementById("nav");
this.li=nav.getElementsByTagName("li");
this.cont=document.getElementById("content");
this.divi=cont.getElementsByTagName("div");
for(var i=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
for(var i=0;i<li.length;i++){
li[i].className="";
divi[i].className="hide";
}
li[this.index].className="on";
divi[this.index].className="show";
}
}
}*/
$(function(){
$('#nav li').each(function(){
$(this).click(function(){
$('#nav li').removeClass("on");
$(this).addClass("on");
$("#content div").removeClass();
$("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");
})
})
})
</script>
<body>
<div class="wrapper">
<div id="nav">
<ul>
<li class="on">num1</li>
<li>num2</li>
<li>num3</li>
<li>num4</li>
</ul>
</div><div id="content">
<div class="show">content1</div>
<div class="hide">content2</div>
<div class="hide">content3</div>
<div class="hide">content4</div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助。