CSS+JSでタブラベル切り替えを実装_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS+JSでタブラベル切り替えを実装_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:51:39

オリジナル

1156 人が閲覧しました

タブのラベル切り替えの実装は比較的簡単です。まず、私が実現した効果を見てみましょう:

1. 選択したタブを表示します。

以下の実装コードを見てください:

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

ログイン後にコピー

アイデア:

ループしてすべてのコンテンツラベルを非表示にし、 tab タイトルバーのアクティブなスタイルをクリアします。その後、選択したタグの内容表示を設定し、タブのタイトルバーにアクティブなスタイルを追加します。

ご不明な点がございましたら、お問い合わせください:

QQ: 1004740957

メール: niujp08@qq.com