Tab切换是前端开发中经常需要用到的一项技术，本篇文章主要是对JavaScript实现Tab标签切换效果的简单实例进行了介绍，代码简洁易用，需要的小伙伴可以过来参考下，希望会对大家有所帮助！

默认是鼠标悬停显示Tab效果，如果需要点击效果，只需要将其中的onmouseover 修改为 onclick 点击即可。

<!DOCTYPE html>
<html>
 　<head>
 　<meta charset="UTF-8">
 　<title>tab表格实现自动切换</title>
 　<style type="text/css">
 　　*{margin: 0;padding: 0;}
 　　.clearfix{clear: both;}
 　　.tabs{
 　　　width: 50%;
 　　　height: 40%;
 　　　margin: 10% auto;
 　　}
 　　.nav{
 　　　border: #cdcdcd 1px solid;
 　　　border-bottom: none;
 　　　background-color: #cdcdcd;
 　　}
 　　#nav li{
 　　　float: left;
 　　　width: 100px;
 　　　list-style: none;
 　　　text-align: center;
 　　　font: normal normal 14px/3em "微软雅黑";
 　　　cursor: pointer;
 　　}
 　　.nav_bar{
 　　　background-color: white;
 　　　color: #808080;
 　　}
 　　#con div{
 　　　height: 300px;
 　　　text-align: center;
 　　　line-height: 300px;
 　　　clear: both;
 　　　border: #cdcdcd 1px solid;
 　　　display: none;
 　　}
 　　#con div.con_bar{
 　　　display: block;
 　　}
 　</style>
 </head>
 <body>
 　<div class="tabs">
 　　<ul id="nav" class="nav">
 　　　<li class="nav_bar" onmousemove="setTab(0)">标题一</li>
 　　　<li onmousemove="setTab(1)">标题二</li>
 　　　<li onmousemove="setTab(2)">标题三</li>
 　　　<li onmousemove="setTab(3)">标题四</li>
 　　　<div class="clearfix"></div>
 　　</ul>
 　　<div id="con" class="con">
 　　　<div class="con_bar">这里是第一段内容区域</div>
 　　　<div>这里是第二段内容区域</div>
 　　　<div>这里是第三段内容区域</div>
 　　　<div>这里是第四段内容区域</div>
 　　</div>
 　</div>
 　<script type="text/javascript">
 　　function setTab(n) {
 　　　var navs=document.getElementById('nav').getElementsByTagName('li');
 　　　var show=document.getElementById('con').getElementsByTagName('div');
 　　　for (var i=0;i<navs.length;i++) {
 　　　　if (i==n) {
 　　　　　navs[i].className="nav_bar";
 　　　　　show[i].className="con_bar";
 　　　　} else{
 　　　　　navs[i].className="";
 　　　　　show[i].className="";
 　　　　}
 　　　}
 　　};
 </script>
 </body>
</html>

演示及下载地址：

[demo]http://demo.skillcat.cn/javascript/Tab_Switch/index.html[/demo]　　　[download]http://demo.skillcat.cn/javascript/Tab_Switch/Tab_Switch.zip[/download]

使用方法：

将附件中的index.html中的代码部分以及css样式拷贝到你需要的地方即可.

赏

技术成就梦想，细节成就品质。