CSS+JS Enable tab TAB switching

It's easier to switch tabs, but let's look at the results I've achieved:

I have mainly achieved:

1, the tab between the mutual switch;

2. Display the selected tab

Here's 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<total+1;i++) {        $ ("#tab" +i). Removeclass ("tab-title-active");        $ ("#content" +i). Hide ();    }    $ ("#tab" +active). AddClass ("tab-title-active");    $ ("#content" +active). Show ();}

Html:

<! DOCTYPE html>
Implementation ideas:
The loop hides all the content labels, clears the active style of the tab title bar, sets the contents of the selected label to display, and adds the active style to the tab title bar.

If you have any questions, please contact:
qq:1004740957
Email:[email protected]
CSS+JS Enable tab TAB switching