用js实现简单的tab标签切换
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
}
#box{
margin-top: 200px;
width: 1000px;
height: 100px;
background-color: #00CC00;
display: flex;
align-items: center;
}
#box li{
display: inline;
}
#box a{
color: #F9F2F4;
text-decoration: none;
padding: 10px 30px;
}
#box a:hover{
background-color: #006699;
}
.main{
margin-top: 20px;
background-color: #245580;
height: 500px;
width: 1000px;
}
</style>
<body>
<div id="box">
<ul >
<li><a onclick="index1()" href="#">首页</a></li>
<li><a onclick="index2()" href="#">第二页</a></li>
<li><a onclick="index3()" href="#">第三页</a></li>
<li><a onclick="index4()" href="#">第四页</a></li>
<li><a onclick="index5()" href="#">第五页</a></li>
</ul>
</div>
<div class="main">
<p id="Noah">默认</p>
</div>
</body>
<script type="text/javascript">
var obj=document.getElementById("Noah");
function index1(){obj.innerHTML="这是首页";}
function index2(){obj.innerHTML="这是第二页";}
function index3(){obj.innerHTML="这是第三页";}
function index4(){obj.innerHTML="这是第四页";}
function index5(){obj.innerHTML="这是第五页";}
</script>
</html>
效果图：
版权声明：本文为qq_34263082原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。