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

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

タブ: カテゴリ + 説明

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

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 5.7.27 のインストールと設定方法のグラフィックチュートリアル

MySQL 5.7.27の詳細なダウンロード、インストール、および構成チュートリアルは参考までに、具...

MySQL デッドロック シナリオ例の分析

序文最近、MySQL で RR レベルでデッドロック問題に遭遇しました。興味深いと思ったので、調べて...

MySQL での実行計画の explain コマンド例の詳細な説明

序文explain コマンドは、クエリ オプティマイザーがクエリの実行を決定した方法を確認する主な方...

du コマンドを使用して Linux システム ディレクトリのサイズを取得する方法

Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...

JavaScript 配列重複排除ソリューション

目次方法1: set: データ型ではなくデータ構造であり、メンバーは一意である方法2: オブジェクト...

ラベルとボタンを削除し、背景画像の点線/影を追加すると完璧な解決策になります

ユーザーが登録すると、ラベルをクリックして確認コードを変更します。クリックするとラベルに影の部分がで...

EF (Entity Framework) の挿入または更新データ エラーの解決方法

エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...

JavaScript でシンプルな Web 時計を実装する

JavaScript を使用して Web ページ クロックを実装します。効果は次の図に示されています...

Ubuntu 18.04 で apt ソースを Alibaba Cloud ソースに変更する詳細なプロセス

目次序文: Ubuntu 18.04 は apt ソースを Alibaba Cloud ソースに変更...

MySQL構成SSL証明書ログインの実装

目次序文1. MySQLはSSL構成を有効にする1.1 SSLが有効になっているかどうかを確認する1...

ズームインとズームアウトの閉じるボタンを実現する CSS (サンプル コード)

この効果はブラウザ ページで最もよく見られます。まずは効果の画像をご覧ください。 上の図に示すように...

MySQL データベースのインデックス順序の詳細な説明

目次事件の原因解剖学ファイルの並べ替えファイルのソートが非常に遅いのですが、他に解決策はありますか?...

Web デザインのための 5 つのシンプルな XHTML Web フォーム

Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...

antd+reactプロジェクトをviteに移行するためのソリューションの詳細な説明

Antd+react+webpackは、多くの場合、Reactテクノロジースタックに基づくフロントエ...

xshellリモート接続の自動切断の問題の解決方法の詳細な説明

xshell を使用したリモート接続システムの自動切断の問題の解決策: 1. サーバー構成サーバーは...