Domyślnie: cel z CSS

Question

mam to CSS:

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

i to 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> 

Jednak moja strona jest pusta, jeśli nie docelowy (# w adresie URL) jest określony i nie ma kartę jest kliknięty jeszcze. Chcę domyślnie pokazać ul#updates-list.

Jak mogę to zrobić? Dzięki.

---

Aktualizacja: Oprócz tego moja mapa Google jest zepsuta, jeśli nie jest początkowym celem. Czy ktoś wie o poprawce?

Answer 1

Spontanicznie muszę powiedzieć, że jedynym rozwiązaniem, jakie mogę wymyślić, jest niestety używanie JavaScript. Coś jak:

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

---

EDIT:

Ok, mam rozwiązanie CSS. To jednak wymaga domyślny wpis #updates-list być umieszczone ostatni (po #updates-map oraz wszelkie inne karty można dodać):

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

Answer 2

myślę, co byś chciał zrobić, to wybrać coś .tab_container:not(> :target) > .default aby wyświetlić kartę domyślną, gdy nie jeden jest celem. Nie jest to jednak możliwe, ponieważ pseudoklasa :not() przyjmuje tylko proste selektory (tj. Tylko :target, a nie > :target, w którym to przypadku sprawdzałoby się cel pojemnika, a nie dzieci).

zrobiłbym jedną z następujących czynności:

• Wykorzystanie Javascript by ustawić cel na pierwszej karcie przy obciążeniu (lub po prostu wymaga, że ​​kotwica jest obecny).

• Dodaj konkretną klasę zastąpienia dla pierwszej aktywnej karty i usuń ją (ponownie przy pomocy Javascript) po pierwszym przełączeniu karty.

Pierwsza alternatywa będzie nieładna z historią przeglądarki, podczas gdy druga będzie nieco bardziej chaotyczna. Nie mogę teraz wymyślić "doskonałego" rozwiązania. Może lepiej jest po prostu używać JavaScript do wykrywania bieżącego celu, aby zarówno uzyskać kompatybilność z przeglądarkami nie CSS3 i rozwiązać ten konkretny problem w nieco czysty sposób?

Answer 3

Przydatne:

.tab#tabControl { display:block; } 

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

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

Answer 4

wiem, jest to stara sprawa, ale to jest nadal aktualne i mam inną propozycję:

<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> 

i CSS:

.tab {display:none} 

.default-tab {display:block} 

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

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

ten pozwala ci zamówić karty, ale chcesz, ale jeśli dynamicznie generujesz html, musisz wygenerować css dy namowo. Lub wybierz maksymalną liczbę zakładek do obsługi podczas pisania css.

Answer 5

To wydaje się być najkrótsza odpowiedź mogłem znaleźć:

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

To po prostu przekierowuje użytkownika do ważnego hash czy jest obecnie nieistniejący lub pusty #.

~ 98% użytkowników ma włączoną obsługę JavaScript, więc rozwiązanie JS nie powinno być problemem.