tabi bence bunlardan biri en iyi çözüm bilginin tematik yapısı ve bir tarafta yer alan kompakt içerik için. Bugün Javascript kullanmadan sadece HTML ve CSS3'te böyle işlevsel bir şeyin nasıl oluşturulacağını anlayacağız.

katlama için tabiv vicoristowati etiketi yapacağız giriş ta css seçici :kontrol. Yılın ilk yarısında, HTML'de bir kenar işaretlemesi oluşturabileceğiz.

Sekme Bir Sekme İki Sekme Üç

Onslaught'un radyo-kutusundaki aktifleşme süresi tabi şeklindedir. Perşom girişözniteliği ayarladık kontrol edildi = ”kontrol edildi” Tse, vіdkritim'in kapanması için ilk sekmenin kırılmasına izin verir. Radyo kutularının kendileri uyumludur ve onları itmek için etiketini kullanabiliriz. etiket. blokta .tabs_cont içeriğin dağıtılacağı sekmeli bloklarımız olacak (metin, resimler vb.). Şimdiye kadar her şey basit.

CSS stillerine gitmek

Sekmeler ( konum: göreli; kenar boşluğu: 0 otomatik; genişlik: 800 piksel; ) .tabs etiketi ( renk: #555; imleç: işaretçi; ekran: blok; kayan nokta: sol; genişlik: 150 piksel; yükseklik: 45 piksel; satır yüksekliği: 45 piksel konum: göreli; üst: 2px; metin hizalama: merkez; ) .tabs girişi ( konum: mutlak; sol: -9999px; ) #tab_1:işaretlendi~ ~ #tab_l3 ( arka plan: #fff; kenarlık rengi: #fff; üst: 0; z-dizini: 3; ) .tabs_cont ( arka plan: #fff; konum: göreli; z-dizini: 2; yükseklik: 230 piksel; )

Yardım stilleri robimo etiketi için buradayız etiket blok elemanı eski görünüm(arka plan ve kordonlar için kendi stillerinizi ayarlayabilirsiniz) istediğimiz gibi ama istediğimiz gibi giriş've mutlak konumlandırmanın yardımı için.

Aynı seçiciyi ver :kontrol hangisini koçanda tahmin ettiğimiz hakkında. Basit kelimelerle, radyo kutusu olarak İD #tab_1 titreşimler/değerler, ardından stiller z bloğuna zastosovuetsya olacaktır İD #tab_l1 analoji için buraya kadar. Bize göre, seçilen isme taba stilleri zastosovuєmo. Sonunda, stilleri sekmelerin içeriğiyle bloğa ayarlıyoruz.

Görevimize adım atın ki tabimiz karışabilsin. Bu görevin uygulanması için aşağıdaki stiller:

Tabs_cont > div (konum: mutlak; sol: -9999px; üst: 0; opaklık: 0; -moz-geçiş: opaklık : opaklık .5s çıkış kolaylığı; ) #tab_1:checked ~ .tabs_cont #tab_c1, #tab_2 :işaretlendi ~ .tabs_cont #tab_c2, #tab_3:işaretlendi ~. : 1;

Bizim için tüm tabibimiz hazır. En basit çözüm kazanmaktır. görüntü yok;, Ale oskelki pürüzsüzlüğe ihtiyacımız var, kolay yollar bize göre değil, yardım için pozisyon: mutlak; bloklarımızı görünürlüğün ötesine taşıyoruz ve daha sıkı bir şekilde, ek güç için bloğumuzu görebiliyoruz opaklık: 0 ve değeri sorunsuz bir şekilde bire yükseltin. Domogtis pürüzsüzlüğü gücümüze yardımcı olur geçiş, Yake sonra tarif etti. Seçici ile tekrar yapalım :kontrol radyo kutularına açabileceğimiz çekingen görünen bazı blokların yardımı için.

Neden her şey! Bu stilleri bağımsız olarak düzelttikten sonra eski görünümü zevkinize göre değiştirebilirsiniz.

Aşağıda hafta sonu girişleri için rezervasyon yaptırabilirsiniz.

Seçimdeki öğelerin stilizasyonu hakkındaki önceki yazının ardından javascript varyantı olmadan duyarlı tabi, mesajlarla mutlak konumlandırma ve hackleme.

Öncelikle belirtmek isterim ki CSS pahasına JavaScript kullanmaya davet etmiyorum, aşağıdaki sekmeleri uygulamanın birden fazla yolu olacaktır. Pek çok durumum var, eğer böyle bir pidhid sizin için işe yaramazsa ve JS olmadan yapamazsınız, ama hemen değil.

Yapılan çalışmalar sonucunda çalışmak istediğimizi ve bize nasıl yardımcı olabileceğimizi anlayalım:

1. JavaScript'siz robot,
2. Sekme sayısına kadar bağlama yok (her sekme için bir widget kazanabiliriz) farklı taraflar ortada farklı içerikle),
3. uyarlanabilirlik,
4. Maksimum çapraz tarayıcı ve platformlar arası,
5. En akıllı ve akıllı kullanıcı arayüzü,
6. İster metin, medya içeriği veya sekmenin ortasındaki düzen olsun, sekmelerin dahili değişikliğinde bir sınır yoktur.

Görsel olarak şöyle görünebilir:

Tim'den önce, seçeneğinizi nasıl gösterirsiniz? JS'siz tab_v Bu görevi tamamlama sürecini bildiğim için size bazı uygulama seçeneklerinden bahsetmek istiyorum.

İlk seçenek

Lyudina, ya açıkça koristuvachiv'i bilmek istediği için ya da kendi "akıllı" yoğunluk düzenleyicilerinizi yaratan reddit'in yazarlarından biri olduğu için bu yöntemi buldu. Sinir tikleri olan benzer bir pidhid'im var.

Yöntemin özü saldırgandır:

Başlıklar gibi (düğmelerin kendileri), sekmeler, ikinci sekmenin kimliği - div veya başka bir öğe gibi href özelliğine eklenir. Aktif sekmeyi görmeyi ek bir sözde sınıf takip eder: hedef.

Bunun gibi pratik yapın:

Hatırlayacağınız gibi, bu yöntemle ilgili sorunlarımız olabilir:

1. Sekme sayfasına basıldığında, atlamaya başlar, böylece tarayıcı bizi orada, ihtiyacımız olan yerde düzeltir. Açıkçası, elinizden geldiğince kaybolun, ancak JS olmadan bu zaten imkansız.
2. Sekmenin aktif başlığı görünmüyor, ancak kırılabilir, ancak daha da sorunlu olabilir.
3. Bir sürü aktif sekme yok (parçalar henüz gücü zorlamadı) ve hack'e girip aktif üçüncü sekme üzerinde çalışmalıyız, ilkini bu şekilde görün, görmeyin.
4. Daha da iyi uyarlanabilirlik: örneğin, ekran sesleri geldiğinde sekmeler yeni bir satıra yeniden yüklenir ve sekmenin içeriği onunla aynı anda ses çıkarır, ekran daha da güzel görünmez. Bu sorun medya-içeceklerle aşılabilir, sekme sayısına takılmak istemeyenlere karşı koruma sağlanır, belirli ekran boyutlarında sorun ortadan kalkar.

Robimo ve bıyık gerçeği: Bu yöntem bize uygun değil, kırıklar çoğumuzu tatmin edemedi. Uygulama açgözlü ve muzaffer olmaktan mutlu değilim.

Diğer seçenek

Tsey yöntemi javascript olmadan sekmeleri katla daha da pratik, bunu yapmak isteyen zastosuvanni ile sorun yaşayabilir. Yöntemin özü saldırgandır: sekmelerin başlıkları için onay kutusu ve etiket öğeleri işaretlenir ve ek sözde sınıf: işaretli ve bir div öğesinin arkasında yalnızca etkin sekmenin içeriğini gösterebilir ve ekleyebiliriz BT:

Sekme sarmalayıcı girişi:işaretli + etiket + .tab-item(ekran: blok;)

Eksen nasıl çalışır:

Hatırlayacağınız gibi, hangi dipçiğin pozisyonu vardır: mutlak; schob_stiti sekme başlıkları üste ve sekme içeriği aşağıya. Aynı sorunları yaratıyorum:

1. Adaptasyon değil. Ekran boyutunu değiştirdiğinizde sekmeler aşağı iniyor ve sekmeler yerine sekmeler kapanıyor. Düzeltebilirsiniz: yatay bir sekme kaydırma ekleyin, böylece çözüm olabilir, ancak olması gerekmez.
2. Bu nedenle, sekmelerin içeriğini görüntülemek için mutlak bir konumlandırmaya sahibiz, sekmelerin sabit yüksekliğini belirtmemiz gerekecek, aksi takdirde daha düşük olan (görünüşe göre popoda) içeriği bozacaklar ve bu şu anlama geliyor: biz yapamamak Danimarka Pidhidi bilinmeyen sayıda sekme gecikmesiyle.

Açıkçası, bazı durumlarda, örneğin sekme sayısını ve bunların ortasındaki içeriği biliyorsanız, bu yöntem engellenebilir. Ale mi shukayemo evrensel çözümü, bu tsey pidkhid bizim vpadka'mızda zastosovuetsya değil.

Çözüm

Üçüncü seçenek, şarap çözümü, є başka bir yöntemin değiştirilmesi. Pratsiuє vіn öyle, başlıklar için şamandıranın mutlak konumlandırmasını ve gücünü kazanmayacağız.

-de Bu method Bu içeriğe sekmeler yerleştirmek için en son moda flexbox'ı kazandık. Buradaki flexbox'ın tüm güzelliği, arkadaki bazı öğeleri ve bazılarını tanıyabilmemiz gerçeğinde yatmaktadır. Ek yardım sırası isteyebilirsiniz: 1; , umovchannyam dorivnuє sıfır için Yake.

Sekmelerin yanıt verebilirliğine flex power flex-grow ile de erişilebilir: 1; , boyutu farklı sayıda sekmeye taşıyamadığımız için sekmelerin içeriğin tüm genişliğine kadar genişlemesine izin verir. Ayrıca, dış görünüm sekmesinin ortasına herhangi bir boyuttaki içeriği yerleştirebiliriz, ancak bunlardan sonra içeriğe ekleme yapmayız.

Tsey pіdhіd herkes için çalışıyor mevcut tarayıcılar, cep telefonları dahil. Z, zenginler için değil, yetkililer, yalnızca Flexbox kazanıyor ve şaraplar uzun süredir geniş çapta destekleniyor. -de Firefox tarayıcıları, Chrome, Safari ve Opera, robotik sekmelerde herhangi bir sorun bulamadım.

Bu beslemeyi jsfiddle'da veya kendi projelerinizde dönüştürebilirsiniz. Radyum ve diğer problem önermeleri yorumlarda.

Kısa bir süre önce, sekmelerin (sekmelerin) uygulanmasına farklı bir şekilde, JavaScript etkinleştirilmeden, robotik ve açma-kapama standartlarında galip baktık.
Bugün sizi, saf CSS3'ten ve uyarlanabilir mizanpajın birden çok öğesinden ilham alan kompakt bir sekme bloğu (sekmeler) oluşturmaya yönelik çözümlerden daha az olmamak üzere bir şeyle daha tanımak istiyorum. İlk versiyonda olduğu gibi, zayvogo ve hantal hiçbir şey yok, ancak daha az css kodu ve mizanpajınız, ister bir duyuru, ister bir yan sütun veya bir kalıcı pencere olsun, kenarın herhangi bir bölümüne sığacak şekilde birleştirilmiş sekmelere sahip uyarlanabilir bir bloğa sahip olacaktır.

İlk seçenekte hangi değişiklikler yapıldı?
Nasampered, sekme bloğu uyarlanabilir hale geldi, tobto. bakarken mobil ek binalar, koristuvac ek binalarının ekranlarının eskimiş düzeninde sekmelerin düzeni değiştirilir, başlıkların metni kaldırılır ve yalnızca ekranda görüntülenmesi gereken yazı tipi simgeleri dışarıda bırakılır.
Yazı tipi simgelerini koleksiyona vidaladıktan sonra koleksiyon daha da zengin ve üstelik tamamen ücretsiz. Simgeleri herhangi bir projeye, vikoristovuyuchi zabіr zі yazı tiplerine entegre edebilir veya dosyaya bağlanabilirsiniz. css stilleri aracı olmadan, satıcının web sitesinden @import aracılığıyla, vikoristovuyuchi şöyle bir satır:

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

Gösterici poponun kendisinde o kadar inatçıydım ki, dış görünüşe de baktım, neyin ne olduğunu anlamak kolay.
Html'nin sekme yapısı basittir. Temel div kapsayıcısı, denir o kesintisiz bölüm