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

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

タブ: カテゴリ + 説明

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

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にスティッキー効果を追加する方法

推薦する

MySQL msiバージョンのダウンロードとインストールの初心者向けの詳細なグラフィックチュートリアル

目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...

Centos7 に DAMO データベースをインストールするチュートリアル

1. 準備Linux オペレーティング システムをインストールした後、ここで Linux 7 を選択...

WindowsにMySQL5.7圧縮パッケージを素早くインストールする

この記事では、Windows に MySQL 5.7 圧縮パッケージをインストールする方法について説...

Mac で MySQL 8.0.22 のパスワードを取得する方法

Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...

Centos8 で yum を使用して mongodb 4.2 をインストールする方法

1. リポジトリファイルを作成するmongodb の公式インストール ドキュメントを参照し、次のスク...

JQuery データグリッドクエリの詳細な説明

目次ツリー項目にコードを追加します。 1. 右側に関連情報ページを保存します(userManage....

Vue3 Vue CLI マルチ環境設定

目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...

ウェブフロントエンドコードを書く際の考慮事項のまとめ

1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...

ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善

<br />このシリーズの最初のセクションでは、Web サイトのパフォーマンスを向上させ...

React で Antd の Form コンポーネントを使用してフォーム機能を実装する方法

1. 構造部品1. フォームには、入力コントロール、標準フォーム フィールド、ラベル、ドロップダウン...

Linux でコマンドまたはプロセスの実行時間を調べる方法

Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...

初心者向けBootstrap 3.0学習ノート

この学習ノートの最初の記事として、シリーズの他の記事と同様に、Bootstrap の紹介から始め、そ...

MySQL 8のパスワードを忘れた場合のベストな対処法の簡単な分析

序文MySQL に精通している読者は、MySQL が非常に迅速に更新されることに気付くかもしれません...

Linux の非常に詳細な gcc アップグレード プロセス

目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...

Docker を使用した nGrinder パフォーマンス テスト プラットフォームの導入プロセスの分析

nGrinderとは何ですか? nGrinder は、スクリプトの作成、テストの実行、監視、結果レポ...