CSS JS implements tab label switching_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS JS implements tab label switching_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:51:39

Original

1138 people have browsed it

It is relatively simple to implement tab label switching. Let’s take a look at the effect I achieved:

What I mainly achieved:

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;}

Copy after login

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();}

Copy after login

html:

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>TAB切换标签</title>    <link rel="stylesheet" href="tabtest.css">    <script src="../jquery-1.8.3.js"></script>    <script src="tabtest.js"></script></head><body><div class="tab-ui">    <div class="tab">        <div class="tab-title tab-title-active" id="tab1" onclick="show(3,1)">            <a>法家简介</a>        </div>        <div class="tab-title" id="tab2" onclick="show(3,2)">            <a>墨家简介</a>        </div>        <div class="tab-title" id="tab3" onclick="show(3,3)">            <a>道家简介</a>        </div>    </div>    <div class="content">        <div class="tab-content" id="content1">            法家，代表人物韩非、李斯、管仲、商鞅，代表作《韩非子》、《管子》。        </div>        <div class="tab-content" id="content2" style="display: none;">            墨家，代表人物墨翟，代表作《墨子》。        </div>        <div class="tab-content" id="content3" style="display: none;">            道家，代表人物李耳、庄周，代表作《老子》、《庄子》。        </div>    </div></div></body></html>

Copy after login

Implementation idea:

Loop to hide all content tags and clear the active style of the tab title bar. After that, set the content display of the selected tag and add the active style to the tab title bar. .

If you have any questions, please contact:

QQ: 1004740957

Email: niujp08@qq.com