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

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

タブ: カテゴリ + 説明

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

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

推薦する

Windows システムの MySQL が中国語を入力および表示できない問題の解決方法

ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

HTML の title 属性を正しく使用するためのヒント

コンテンツを携帯電話、タブレット、支援技術のユーザーから非表示にし、キーボードのユーザーにのみ表示す...

MySQL と Golan 間の従来の分散トランザクションのための 7 つのソリューション

目次1. 基本理論1.1 取引1.2 分散トランザクション2. 分散トランザクションソリューション2...

XHTML ドキュメントで JavaScript と CSS を正しく使用する方法

ますます多くのウェブサイトで、XHTML が HTML4 に取って代わって急速に普及しています。しか...

mysqlは指定された期間内の統計データを取得します

mysqlは指定された期間内の統計データを取得します年別統計 選択 カウント(*)、 DATE_FO...

Linux での SSH 非秘密通信の実装

SSHとは何か管理者はリモートでログインして、インターネット経由で接続されたさまざまな場所にある複数...

MySQL 制約の種類と例

制約制約によりデータの整合性と一貫性が確保される制約はテーブルレベルの制約と列レベルの制約に分けられ...

ドラッグ位置プレビューを実装するネイティブJS

この記事では、要素をドラッグするときにプレビューを追加する小さなデモを紹介します。効果は次のとおりで...

CSS3 フレックスボックス自動記入の書き方を詳しく解説

この記事では、主に CSS3 フレックス エラスティック ボックスの自動塗りつぶしの書き方について詳...

よくある HTML タグの記述エラー

HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...

MySQL データベースは XA 仕様をどのように実装しますか?

MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...

LeetCode の SQL 実装 (175. 2 つのテーブルの結合)

[LeetCode] 175.2つのテーブルを結合する表: 人物+-------------+--...

MySQL 5.7.25 のインストールと設定方法のグラフィックチュートリアル

MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...