タブバーの切り替え効果を実現する方法

一个新手
リリース: 2017-10-11 10:25:18
オリジナル
2870 人が閲覧しました

ナビゲーションバー切り替え効果:

htmlコードは次のとおりです:

<ul id="tab">
    <li class="fli">tab1</li>
    <li>tab2</li>
    <li>tab3</li>
</ul>

<p id="tab_con">

    <p class="fp">aaaa</p>

    <p>bbbb</p>

    <p>cccc</p>

</p>
ログイン後にコピー

cssスタイルコードは次のとおりです:

       ul, li, p {
            padding: 0;
            margin: 0;
        }

        ul li {
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #fff;
            border: 1px #bbb solid;
            border-bottom: none;
            cursor: pointer;
        }

        ul li.fli {
            background-color: #ccc;
            color: red;
        }

        ul {
            overflow: hidden;
            zoom: 1;
            list-style-type: none;
        }

        #tab_con {
            width: 304px;
            height: 200px;
        }

        #tab_con p {
            width: 304px;
            height: 200px;
            display: none;
            border: 1px #bbb solid;
            border-top: none;
        }

        #tab_con p.fp {
            display: block;
            background-color: #ccc;
        }

        .tclass{
            width: 100px;
            height: 30px;
            background: #000;
        }
ログイン後にコピー

jsコードは次のとおりです:

りー

以上がタブバーの切り替え効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート