CSS + JS implement tab Switch

CSS + JS implement tab Switch

It is relatively easy to implement tab switch. Let's take a look at the effect of my implementation:

I mainly implemented:

1. Switch between tabs;

2. display the Selected tab

 

Let's take a look at the implementation code:

Css:

 

html,body,div{    font-size: 12px;    font-family:Arial;}.tab-ui{    width: 400px;    height: 300px;    position: relative;}.tab-title{    border-top-right-radius:8px;    float: left;    border: solid 1px #7EABCD;    background: #c5dbec;    padding: 5px;    font-weight: bold;    color: #ffffff;    margin: 1px;}.tab-title:hover{    cursor: pointer;}.tab-title-active{    background: #7EABCD;}.content{    width: 100%;    height: 100%;    position: absolute;    top: 27px;    left: 1px;}.tab-content{    padding: 10px;    border: solid 1px #c5dbec;}

Js:

 

 

Function show (total, active) {for (var I = 1; I
 
  
Html:
  
 
  
 
  

  
  
  <Script src = .. /jquery-1.8.3.js> </script> <script src = tabtest. js> </script> introduction to the Legalists: Introduction to the family of mojia: Introduction to Taoism: representatives of Han Fei, Li Si, Guan Zhong, and Shang Yang; representatives of Han Feizi and Guan. Mo Jia, who represents Mo Yu, represents Mo Zi. Taoism, represented by Li Er and Zhuang Zhou, represents Lao Tzu and Zhuangzi.
 

Implementation ideas:

 

Loop to hide all the content labels, and clear the active style of the tab title bar, set the content of the selected label to display, and add an active style to the tab title bar.