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

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

タブ: カテゴリ + 説明

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

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

推薦する

Django+Mysql+Redis+Gunicorn+NginxのDockerデプロイメントの実装

I. はじめにDockerテクノロジーは現在非常に人気があります。コンテナを介してプロジェクト環境を...

Linux での syslogd および syslog.conf ファイルの解釈

1: syslog.conf の概要異なるタイプの Unix の場合、標準の UnixLog システ...

LinuxはMySQLデータベースの自動バックアップとスケジュールバックアップを毎日実装しています

概要バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

SQL 実装 LeetCode (185. 部門内で最も給与の高い上位 3 名)

[LeetCode] 185. 部門別給与上位3位従業員テーブルにはすべての従業員が保持されます。...

サイバーパンクスタイルのボタンを実現するためのHTML+CSS

まず効果を見てみましょう: 序文:このアイデアは、Bilibili のアップロード者 Steven ...

MySQLのインデックス選択と最適化の詳細な説明

目次インデックスモデルB+ツリーインデックスの選択インデックスの最適化インデックスの選択性カバーイン...

Linux のユーザーとグループ管理によく使われるコマンドの概要

この記事では、Linux のユーザーとグループの管理によく使用されるコマンドをまとめます。ご参考まで...

Vueは不規則なスクリーンショットを実装する

目次SVG による画像キャプチャCSS部分エフェクト画像表示ソースコードアドレスこれまで見てきたもの...

Alibaba Cloud ホストが IP を使用して Web サイトにアクセスできない問題の解決策 (セキュリティ グループ ルールを構成することで解決)

Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...

ブラウザがクロージャをどのように認識するかについて詳しく説明します

目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...

dockerコマンドの使用にはsudoは必要ありません

docker デーモンは通常の TCP ポートではなくホストの Unix ソケットにバインドする必要...

js は複数の画像を zip にパッケージ化します

目次1. ファイルをインポートする2. HTMLページ3. メインコード4. 画像をbase64に変...

JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)

数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...

jsシミュレーションでJingdongの詳細ページで画像を拡大する効果を実現

この記事では、Jingdongの詳細ページの画像の拡大を実現するためのjsの具体的なコードを紹介しま...

Dockerコンテナでyumを呼び出すときのエラーの解決方法

dockerfile またはコンテナ内で yum を実行すると、エラーが報告され、ソースが見つかりま...