ホームページ > ウェブフロントエンド > jsチュートリアル > タブバーの切り替え効果を実現する方法

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<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スタイルコードは次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

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 サイトの他の関連記事を参照してください。

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