タブバーのいくつかの実装方法(推奨)

タブバーのいくつかの実装方法(推奨)

タブ: カテゴリ + 説明

タグバー: カテゴリ => ユーザーに現在地と目的地を知らせる

1. CSS命名方法:

XML/HTML コードコンテンツをクリップボードにコピー
  1. < div  クラス= "サービスタブ サービスタブ1" >   
  2.   
  3.   < ul  クラス= "サービスタブ内部" >   
  4.     <  クラス= "on" > < a   href = " #nogo " >フォロー</a> </li>   
  5.     < li > < a   href = "#nogo" >推奨事項</ a > </ li >     
  6.     < li > < a   href = "#nogo" >ナビゲーション</ a > </ li >     
  7.     < li > < a   href = "#nogo" >ショッピング</ a > </ li >     
  8.   </ ul >   
  9.   
  10. </div>   
  11.   

タブ: タブ

利点: 1. 見つけやすい 2. SEO 標準に準拠

2. レイアウト:

1.<ul><li> </div>
1) float: clear float overflow:hidden;/疑似クラス:after/
2) display:inline-block IE7 は互換性がありません: *display:inline;*zoom:1; 空白: font-size:0;/same line/negative margin/letter-spacing

2.<表>

3. テンプレートコード:

1. マウスオーバーして背景色を追加する

CSSコードコンテンツをクリップボードにコピー
  1. .service-tabs li a{: 160px ;高さ: 80px ;表示:ブロック;: #666 ;フォントサイズ: 32px ;}
  2. .service-tabs1 li a:hover{: #2CC185 ;}
  3. .service-tabs1 li.on a{ background-color : #2CC185 ; color : #fff ;} /*背景色*/   

2. 小さな三角形、明らか

CSSコードコンテンツをクリップボードにコピー
  1. .service-tabs4 li{位置:相対;}
  2. .service-tabs4 li a:hover{: #2CC185 ;}
  3. .service-tabs4 li.on a{背景色: #2CC185 ;: #fff ;}
  4. .service-tabs4 li i{: 11px ;高さ: 7px ;位置: absolute ;: - 6px ;: 76px ;背景: url (images/arrow.png);表示: none ;}
  5. .service-tabs4 li.on i{ディスプレイ:ブロック;}

3. 下線マーキング

CSSコードコンテンツをクリップボードにコピー
  1. .service-tabs2 li a:hover{: #2CC185 ;}
  2. .service-tabs2 li.on a{高さ: 78px ;下部境界線: 2px  固体  #2CC185 ;: #2CC185 ;}

4. スクリプトの実装

JavaScriptコードコンテンツをクリップボードにコピー
  1. $( function (){ $( ".service-tabs ul li" ).click( function () { $( this ).addClass( "on" ).siblings().removeClass( "on" ); }); })
  2.   

シンプル+実用的

以上、タブバーのいくつかの実装方法(推奨)は、エディターが皆さんと共有する内容です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Vue でのスロット配置と使用状況分析

>>:  CSSにスティッキー効果を追加する方法

推薦する

HTML における rel="nofollow" の役割と rel 属性の使用を分析する

リンクに rel="nofollow" 属性を追加すると、検索エンジンにこの接続...

JavaScript データ型の詳細な説明

目次1. リテラル1.1 数値リテラル1.2 浮動小数点リテラル1.3 特別な値1.4 文字列リテラ...

HTML ドラッグ アンド ドロップ機能の実装コード

Vueベースこの機能の核となるアイデアは、JavaScript コードを通じてページ上のノードの左余...

React双方向データバインディングの原理についての簡単な説明

目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...

Linuxカーネルがプロセスアドレス空間に侵入し、プロセスメモリを変更する方法

プロセス アドレス空間の分離は、現代のオペレーティング システムの注目すべき機能です。これは、「古い...

MySQL のロードバランサーとして nginx を使用する方法

注意: nginxのバージョンは1.9以上である必要があります。nginxをコンパイルするときに、-...

JS 継承の詳細

目次序文準備する要約する継承方法プロトタイプ継承プロトタイプチェーン継承コンストラクタの借用(クラス...

CSS スタイルにおける中国語フォントのフォントファミリーに対応する英語名の詳細な説明

ソングティ: SimSun太字: SimHeiマイクロソフト YaHei: マイクロソフト YaHe...

Docker 構成コンテナの場所とヒントのまとめ

Docker の使用に関するヒント1. 停止したDockerコンテナをすべてクリーンアップする停止し...

Linux で Hadoop クラスターをインストールするための詳細な手順

目次1. usrディレクトリにHadoopディレクトリを作成し、インストールパッケージをそのディレク...

MySQLデータベースは何をするのか

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

MySQL で重複を削除するには、distinct または group by を使用する必要がありますか?

序文group by と distinctive のパフォーマンス比較について: インターネット上の...

誤って削除されたデータを復元するための mysqlbinlog コマンドを使用した mysql の実装

実験環境: MYSQL 5.7.22バイナリログを有効にするログ形式 MIXED実験プロセス: 1....

MySQL テーブルパーティションの使用法と基本原理の詳細な説明

目次パーティションテーブルとはパーティションテーブルの適用シナリオパーティションテーブルの制限パーテ...