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.me/javascript/Tab_Switch/index.html[/demo]   [download]http://demo.skillcat.me/javascript/Tab_Switch/Tab_Switch.zip[/download]

使用方法:

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


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