ブートストラップのタブ プラグインを使用してレイヤー切り替え効果を作成します (誤解を招くと思います。楽しみとして見てください)_html/css_WEB-ITnose

皆さん、私は JS が本当に苦手なので、いつも怠惰になりたいので、その効果を実現するために、タブのプラグインを変更しました。心臓も非常に壊れやすいです)...

最近のプロジェクトでは、将来のモバイル デバイスの互換性を考慮するために、Bootstrap が使用されました。以下に示すように、マウスが異なるボタンをクリックする必要がある別のボタンをクリックする必要があります（明確に説明しましたか...）。 3、4 のボタンはそれぞれ対応するコンテンツが変わります。

混乱しました、これはタブプラグインとよく似ています~~ ボタンをクリックするだけでレイヤーを変更できます。別の場所で独立したプラグインを探すと、私の記憶では遅かれ早かれプロジェクトの js ファイルが非常に乱雑になり、関数ファイルが何であるかさえ分からなくなるため、まずスタイルを変更してみます。変更前と変更後の比較です。

修正前:

修正後: (公共部門に関しては多くの部分が削除されています。見てください。色の一致や弱点についてはコメントしないでください~~)

以下にあなたの考えを書き留めてください:

1. 左ボタンの実装 的 オリジナルの TAB ボタン ソースの紫色の点滴をコンテンツ レイヤーの左側に向けて配置する必要があります。下を見る 1.1

UL (ボタン)、div (コンテンツ) の構造を見てください。滴

はクラスを UL に直接追加します: & lt; ul class = "clearfix color-lg-4" & gt;, add & lt; div class = "tab-conflicing Colg-8" >。次に、 & lt; にスタイルを追加します。ブロック要素になり、長さと幅、float:leftなどを設定します。

1.2Font 素晴らしいフォント

つまり、各ボタンのアイコンにはアイコンフォントが設定されています。ここではFont Awesome V4.3.0を使用します。非常に多くのアイコンには必要なものがなかったので、アイコンの組み合わせが使用されました。この方法は次のとおりです。

round roundとは、丸いアイコンと上向きの矢印の組み合わせです。 …… …… ... りーっ