教你制作tab标签，简单的div+css，js控制div显示隐藏

先看下效果图吧

分析一下，这个效果一共用了四个div，首先标签栏分别用了两个div，分别是两个栏目的名称按钮。第二是两个栏目所对应的两个内容div，共四个div。代码如下：

  <div id="tab01" onclick="change_tab('1')">description</div>

  <div id="tab02" onclick="change_tab('2')">featrues</div>

 </div>

 <div id="tab_content01" style="padding:12px">content01</div>

 <div id="tab_content02" style="padding:12px; display:none">content02</div>

上面两个div都设置为左浮动，并设置div的宽度跟高度。下面两个div设置初始值，其中一个初始值为显示，另外一个隐藏。样式如下：

#tab01{float:left; width:84px; height:24px; color:#27537A; display:inline; cursor:pointer}

#tab02{float:left; width:84px; height:24px;  color:#000000; cursor:pointer}

.tab_content01{display:block}

.tab_content02{display:none}

做好上面的步骤，那么你的tab基本框架就出来，如果你想好看点，就加背景图，样式再调一下，那就很漂亮了。接下来是给按钮加个鼠标事件，也就是按钮的点击事件，其实也很简单，原理就是：当你点击第一个按钮的时候，那就改变下按钮的样式，还原另一个按钮的样式，同时显示点击按钮所对应的那个内容div。如果点击另外一个按钮就把样式颠倒一下就行了。js代码如下

function change_tab(tab_id){

 if(tab_id==1){

  document.getElementById("tab01").style.color = "#27537A";

  document.getElementById("tab02").style.color = "#000000";

  document.getElementById("tab_content01").style.display = "block";

  document.getElementById("tab_content02").style.display = "none";

 }

 if(tab_id==2){

  document.getElementById("tab01").style.color = "#000000";

  document.getElementById("tab02").style.color = "#27537A";

  document.getElementById("tab_content01").style.display = "none";

  document.getElementById("tab_content02").style.display = "block";

 }

}

注意：以上内容只是简单的介绍tab如何实现，如果需要更漂亮的样式，效果，还需要加些特效代码，这里我就不多说了。原理大家懂了就可以随心所欲的变化了。