使用CSS实现标签页的制作

使用CSS制作标签页，需要准备一个基本的HTML结构，比如：

  

    
Tab 1
    
Tab 2
    
Tab 3
  
  

    

      
Tab 1 Content
    
    

      
Tab 2 Content
    
    

      
Tab 3 Content
    
  

这个HTML结构中，有一个div标签包含了ul标签和div标签，ul标签中包含了3个li标签，每个li标签中有一个a标签，div标签中包含了3个id分别对应上面的3个li标签，每个id中包含一个p标签。

就是使用CSS来实现标签页的功能，让所有的div标签都处于隐藏状态：

.tab-content div {
  display: none;
}

让第一个div标签处于显示状态：

.tab-content div.active {
  display: block;
}

让点击每个li标签时，对应的div标签显示：

.tab-links a:hover {
  background: #ddd;
}

.tab-links li.active a {
  background: #ccc;
}

.tab-links a {
  display: inline-block;
  padding: 10px 20px;
  background: #eee;
  border-radius: 4px 4px 0 0;
}

.tab-content div {
  display: none;
}

.tab-content div.active {
  display: block;
}

添加一些样式，让标签页看起来更加美观：

.tab {
  width: 500px;
  margin: 0 auto;
}

.tab-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tab-content {
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

，只需要准备一个基本的HTML结构，通过CSS添加一些样式，就可以实现标签页的功能。

千锋教育是高品质web前端培训机构，千锋教育拥有大量实力web前端培训讲师，提供优质的web培训课程，web前端培训，欢迎报名千锋教育。