CSS + JS implements tab switch and CSS jstab labels

CSS + JS implements tab switch and CSS jstab labels

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<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:

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.


If you have any questions, contact:
QQ: 1004740957
Email: niujp08@qq.com