足袋私の意見では、 最良の解決策情報の主題構造、およびコンパクトなコンテンツの場合は、コンテンツの片側。 今日は、HTMLとCSS3だけでJavascriptを使用せずに、このような機能的なものを作成する方法を理解します。

折りたたみ用 tabiv vicoristowatiタグを付けます 入力 tacssセレクター ：チェック済み。 今年の前半には、HTMLでサイドマークアップを作成できるようになります

タブ1 タブ2 タブ3

足袋の形でラジオボックスの起動時間に猛攻撃。 パーショム 入力属性を設定します チェック済み=「チェック済み」これらは、vіdkritimを閉じるために最初のタブを壊すことを許可します。 ラジオボックス自体は互換性があり、それらをプッシュするためにタグを使用できます ラベル。 ブロックで .tabs_contコンテンツ（テキスト、画像など）が配布されるタブ付きのブロックがあります。 これまでのところ、すべてが単純です。

CSSスタイルに行く

タブ（位置：相対;マージン：0自動;幅：800px;）.tabsラベル（色：＃555;カーソル：ポインター;表示：ブロック;フロート：左;幅：150px;高さ：45px;行の高さ：45px position：relative; top：2px; text-align：center;）.tabs input（position：absolute; left：-9999px;）＃tab_1：checked〜〜＃tab_l3（background：#fff; border-color：#fff; top：0; z-index：3;）.tabs_cont（background：#fff; position：relative; z-index：2; height：230px;）

ここでは、ヘルプスタイルのrobimoタグを使用します ラベルブロック要素 古い外観（背景とコードンに独自のスタイルを設定できます）必要に応じて、ただし好きなように 入力私たちは絶対的なポジショニングの助けを借りています。

このセレクターを与える ：チェック済み私たちが穂軸で推測したものについて。 簡単に言えば、ラジオボックスとして id ＃tab_1 vibranions / valuesの場合、スタイルはブロックzに対してzastosovuetsyaになります id ＃tab_l1まあ、これまでのところ類推のために。 私たちのやり方では、mivikoristovuєmoは選択された名前のタバにスタイルを合わせます。 さて、タブの内容でブロックにスタイルを設定しましょう。

私たちの足袋が混ざり合うことができるように私たちのタスクをステップします。 このタスクを実装するには、次のスタイルを使用します。

Tabs_cont> div（位置：絶対;左：-9999px;上：0;不透明度：0; -moz-遷移：不透明度：不透明度.5sイーズインアウト;：1;

私たちの足袋はすべて私たちの準備ができています。 vikoristatiの最も簡単なソリューション 表示：なし;、Ale oskelki滑らかさが必要です、簡単な方法は私たちにはありません、助けのために 位置：絶対;ブロックを可視性を超えて移動し、より厳密に言えば、ブロックを確認して追加のパワーを得ることができます 不透明度：0値を1にスムーズに上げます。 私たちの力を助けるために滑らかさを達成する 遷移、ヤケは後で説明します。 セレクターでもう一度やりましょう ：チェック済みいくつかの臆病に見えるブロックの助けを借りて、ラジオボックスに開くことができます。

なぜすべてなのか！ これらのスタイルを独自に改良することで、古い見た目を自分の好みに変えることができます。

以下に外部データを入力できます。

選択した要素の様式についてフロントポストを伸ばすことで、私はそれをやりたいので、bi-rozpovistになりたいです javascriptバリアントなしのレスポンシブ足袋、絶対測位とhakivіzメッセージ。

まず第一に、CSSを犠牲にしてJavaScriptを使用するように呼びかけるのではなく、以下のタブを実装する方法は複数あります。 そのようなpidhidが機能せず、JSなしでは実行できない場合、私には多くの状況がありますが、すぐには実行できません。

私たちが仕事の結果として働きたいと思っていること、そして私たちがどのように私たちが見るのを助けることができるかを理解しましょう：

1. JavaScriptなしのロボット、
2. タブの数へのリンクはありません（中央に異なるコンテンツがある異なる側で1つのウィジェットを獲得できます）、
3. 適応性、
4. 最大のクロスブラウザとクロスプラットフォーム、
5. 最もインテリジェントで知的なUI、
6. タブの内部変更は、テキスト、メディアコンテンツ、タブ中央のレイアウトなど、制限はありません。

視覚的には、次のようになります。

ティムの前に、あなたのオプションを示す方法 JSなしのtab_vこのタスクを完了するプロセスについて知っているので、いくつかの実装オプションについて説明したいと思います。

最初のオプション

Lyudinaは、この方法を思いついたとき、または明らかにkoristuvachsに寄り添いたかったとき、または彼女がそれらの「便利な」厚さレギュレーターを作成したとき、redditの作者の1人でした。 私は神経質なチックを持っている同様のpidhidを持っています。

この方法の本質は攻撃的なものです。

（ボタン自体の）タイトルと同様に、タブは2番目のタブのID（divまたはその他の要素）などのhref属性に追加されます。 アクティブなタブが表示された後、追加の疑似クラス：targetが続きます。

このように練習します：

ご存知のとおり、この方法では問題が発生する可能性があります。

1. タブページを押すとジャンプが始まり、ブラウザが必要な場所で修正します。 もちろん、できることは何でも迷子になりますが、JSがなければそれはすでに不可能です。
2. タブのアクティブなヘッダーは表示されませんが、壊れている可能性がありますが、さらに問題があります。
3. アクティブなタブの束はありません（シャードはまだ強度を押し付けていません）。ハックに入ってアクティブな3番目のタブで作業する必要があります。この方法で、最初のタブを参照してください。
4. さらに優れた適応性：たとえば、画面が鳴ったときにタブが新しい​​行に再読み込みされ、タブのコンテンツが同時に鳴りますが、それ以上に優れているわけではありません。 この問題は、メディアドリンク、タブの数に縛られたくない人に対する保護によって克服できます。特定のディスプレイサイズでは、問題は解消されます。

ロビモとひげの真実：この方法は私たちには適していません。破片は私たちの大部分を満足させることができませんでした。 実装は貪欲であり、私は勝利することに満足していません。

その他のオプション

ツェイ法 javascriptなしでタブを折りますさらに実用的な方法として、そうすることを望むと、zastosuvanniに問題が生じる可能性があります。 メソッドの本質は不快です。チェックボックスとラベルの要素がタブヘッダーに使用され、追加のpseudo-class：checkedともう1つのdiv要素の後に、アクティブなタブのコンテンツのみを表示し、残りをすべて取得できます。

タブラッパー入力：チェック済み+ラベル+ .tab-item（表示：ブロック;）

Axisの作業方法：

あなたが覚えているように、どの銃床が位置を持っているか：絶対; タブのヘッダーを上に展開し、タブの代わりに下に展開するため。 私は同じ問題を作成します：

1. 適応性ではありません。 画面サイズを変更すると、タブが下がり、タブの代わりにタブが閉じます。 あなたはそれを修正することができます：タブの水平スクロールを追加して、解決策ができるようにしますが、そうである必要はありません。
2. タブのコンテンツを表示して入力するためのキーは絶対に配置されています。タブの固定の高さを指定する必要があります。そうしないと、コンテンツが歪んで低くなります（お尻に表示されます）が、ツイートできないことを意味します デンマークのPidhid事前に不明な数のタブがあります。

明らかに、場合によっては、このメソッドがブロックされる可能性があります。たとえば、タブの数とその中央のコンテンツがわかっている場合などです。 Ale mi shukayemoユニバーサルソリューション、そのtseypidkhidはvpadkaのzastosovuetsyaではありません。

解決

3番目のオプション、iワインソリューション、є別の方法の変更。 Pratsiuєそうです、私たちは見出しのフロートの絶対的な位置と力を勝ち取ることはできません。

で この方法そのコンテンツにタブを配置するための最新のファッショナブルなフレックスボックスを獲得しました。 ここでのフレックスボックスの全体的な美しさは、背面の要素のいくつかとそれらのいくつかを認識できるという事実にあります。 追加のヘルプオーダーを要求できます：1; 、zamovchuvannyamdorivnuєゼロのヤケ。

タブの応答性は、フレックスウィンドウのフレックスグロー特性にも使用できます。 、これにより、タブをコンテンツの全幅に拡張できます。そのサイズでは、異なる数のタブに移動することはできません。 また、スキンタブの中央に任意のサイズのコンテンツを配置できますが、その後のコンテンツには追加しません。

Tseypіdhіdは誰にとっても機能します 現在のブラウザ、携帯電話を含む。 Flexboxだけが豊富な権限で勝利を収めており、長い間、広くサポートされてきました。 で Firefoxブラウザ、Chrome、Safari、Opera、日中はタブに問題はありませんでした。

このフィードは、jsfiddleまたは独自のプロジェクトで変換できます。 コメントの問題のラジウムと他の命題。

少し前まで、JavaScriptを有効にせずに、ロボット標準のvicoristoを使用して、タブ（タブ）の実装を別の方法で検討しました。
今日は、純粋なCSS3とアダプティブレイアウトのさまざまな要素に触発された、タブ（タブ）のコンパクトなブロックを形成するためのソリューションにほかなりません。 最初のバージョンと同様に、少なくともcssコードは面倒で面倒なものはなく、レイアウトには、タブが重なっているアダプティブブロックがあります。これは、okreme、サイドカラム、またはモーダルvikno。

最初のオプションにどのような変更が加えられましたか？
Nasampered、タブのブロックは適応性があり、tobtoになっています。 見てみます モバイル別棟、coristuvacの別棟の画面のレイアウトが古くなったため、タブのレイアウトが変更され、タイトルのテキストが削除され、フォントアイコンのみが省略され、画面に表示されます。
フォントアイコンをねじ込んだことで、コレクションはさらに豊富になり、それ以前は完全にコストがかかりません。 アイコンを任意のプロジェクト、vikoristovuyuchizabіrzіフォントに統合したり、ファイルに接続したりできます cssスタイル仲介なしで、@ importを介して小売業者のウェブサイトから、vikoristovuyuchiそのような行：

@import url（ "http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"）;

デモンストレーションのお尻自体はとても臆病なので、外観を見ると、何が何であるかを簡単に理解できます。
HTMLタブの構造は単純です。 と呼ばれるベースdivコンテナ その途切れのないセクション