•  我是第五个选项卡的内容1
   
•  我是第五个选项卡的内容2
   
•  我是第五个选项卡的内容3
   
•  我是第五个选项卡的内容4
  

HTML代码分解 ----头部

头部由一个包含了5个 li 标签的列表构成，每个 li 标签中都包含一个 a 标签

这里的selected选择器的作用是 改变选中的li的背景颜色

  

  
   1
  
  

   2
  
  

   3
  
  

   4
  
  

   5
  
 

HTML代码分解 ----内容

在这里每一个含有dom选择器的div依次代表的是每一个选项卡的内容

.dom选择器中设置display:none;，使每一个选项卡内容隐藏

而对展现的内容另外加一个style=“display: block”; 的属性,使其展现在浏览器上

 
  
  

   
 我是第一个选项卡的内容1
   
 我是第一个选项卡的内容2
   
 我是第一个选项卡的内容3
   
 我是第一个选项卡的内容4
  
  
  
  

   
 我是第二个选项卡的内容1
   
 我是第二个选项卡的内容2
   
 我是第二个选项卡的内容3
   
 我是第二个选项卡的内容4
  
  
  
  

   
 我是第三个选项卡的内容1
   
 我是第三个选项卡的内容2
   
 我是第三个选项卡的内容3
   
 我是第三个选项卡的内容4
  
  
  
  

   
 我是第四个选项卡的内容1
   
 我是第四个选项卡的内容2
   
 我是第四个选项卡的内容3
   
 我是第四个选项卡的内容4
  
  
  
  

   
 我是第五个选项卡的内容1
   
 我是第五个选项卡的内容2
   
 我是第五个选项卡的内容3
   
 我是第五个选项卡的内容4
  
  

CSS样式

css代码就不做详细的说明了