Varsayılan: CSS ile hedefle

Question

Bu CSS'ye sahip:

<style type="text/css"> 
.tab { 
    display: none; 
} 
.tab:target { 
    display: block; 
} 
</style> 

Ve bu HTML:

<div class="tab_container"> 

    <ul class="tabs"> 
    <li><a href="#updates-list">List</a></li> 
    <li><a href="#updates-map">Map</a></li> 
    </ul> 

    <ul class="tab list" id="updates-list"> 
    Eh.. Hello! 
    </ul> 
    <div class="tab map" id="updates-map"></div> 
</div> 

Ancak, hedef (URL'de #) belirtilmemişse ve henüz bir sekme tıklanmadıysa sayfam boş. Xzx39 varsayılan olarak göstermek istiyorum.

Bunu nasıl yapabilirim? Teşekkürler.

---

Güncelleme: Bunun yanında, ilk hedef değilse Google Haritam bozuk. Birisi bir düzeltme biliyor mu?

Answer 1

Kendiliğinden düşünebileceğim tek çözümün, ne yazık ki JavaScript kullanması olduğunu söylemek zorundayım. şöyle birşey:

<script type="text/javascript"> 
    if (document.location.hash == "" || document.location.hash == "#") 
    document.location.hash = "#updates-list"; 
</script> 

---

DÜZENLEME:

Ok, CSS çözüm var. Bu ancak varsayılan giriş #updates-list son yerleştirilmesini gerektirir (#updates-map sonra ve eklemek olabilecek diğer sekmeler):

.tab, .tab:target ~ #updates-list { 
    display: none; 
} 
#updates-list, .tab:target { 
    display: block; 
} 

Answer 2

Senden isteyeyim tahmin varsayılan sekme görüntülemek için .tab_container:not(> :target) > .default gibi seçme şey olduğunda hiçbir biri hedeflenmiştir. Ancak, bu mümkün değildir, çünkü :not() sözde sınıf sadece basit seçicilerin (yani :target değil, > :target değil), bu durumda, kapsayıcının hedefini değil, çocukların hedefini kontrol edersiniz.

Ben aşağıdakilerden birini olacaktır:

• Kullanım JavaScript yükte ilk sekmesine hedef belirlemek (ya da sadece çapa mevcut olduğunu gerektirir) için.

• ilk aktif sekme için belirli bir geçersiz kılma sınıfını ekleyin ve ilk sekme anahtarından sonra (JavaScript ile tekrar) çıkarın.

İlk alternatif, tarayıcı geçmişi ile karıştırılırken ikinci seçenek kod karmaşasından biraz daha fazla olur. Şu anda "mükemmel" bir çözüm düşünemiyorum. Belki de CSS3 olmayan tarayıcılarla uyumluluk elde etmek ve bu sorunu biraz temiz bir şekilde çözmek için mevcut hedefi tespit etmek için Javascript'i tamamen kullanmanız daha iyi olur mu?

Answer 3

Yararlı:

.tab#tabControl { display:block; } 

.tab:not(:target) { display:none; } 

.tab:target ~ #tabControl { display:none; } 

Answer 4

Bu eski bir soru olduğunu biliyorum, ama yine de alakalı ve ben başka bir önerim var:

.tab {display:none} 

.default-tab {display:block} 

:target ~ .default-tab {display:none} 

#tab1:target ~ .tab1, 
#tab2:target ~ .tab2 { 
    display: block 
} 

Bu:

<a href="#tab1">Tab 1</a> 
<a href="#tab2">Tab 2</a> 

<a id="tab1"></a> 
<a id="tab2"></a> 

<div class="tab tab1 default-tab">Some content</div> 
<div class="tab tab2">Some other content</div> 

ve css istediğiniz sekmeleri sipariş etmenize izin verir, ancak dinamik olarak html oluşturuyorsanız, css dy üretmeniz gerekir namically. Veya css'yi yazarken desteklenecek maksimum sayıda sekme seçin. şu anda veya boş # varolmayan ise

location=location.hash||"#updates-list"

Bu sadece geçerli bir karma kullanıcıyı yönlendiriyor:

Answer 5

Bu bulabildiğim en kısa cevap gibi görünüyor.

~ Kullanıcıların% 98'i JavaScript'i etkinleştirmiş olduğundan, bir JS çözümü gerçekten sorun olmamalıdır.