Widoczność stylu CSS nie działa zgodnie z oczekiwaniami

Mam stronę html z podstawowym elementem sterującym tabulatorem. Używam javascript do pokazywania i ukrywania kart i elementów div karty. Moim problemem jest to, że jeśli zmienię widoczność elementu wewnątrz jednego z elementów div zakładki na "ukryty", a następnie z powrotem na "widoczny", element wydaje się zapomnieć lub stracić swój macierzysty pojemnik div i pozostaje widoczny, niezależnie od jego oryginalności. widoczność rodziców.Widoczność stylu CSS nie działa zgodnie z oczekiwaniami

Aby zilustrować, wziąć następujący przykład:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script type="text/javascript"> 
    function hideTab(){ 
     document.getElementById('tab1').style.visibility = 'hidden' 
    } 
    function showTab(){ 
     document.getElementById('tab1').style.visibility = 'visible' 
    } 
    function hideContent(){ 
     document.getElementById('tc1').style.visibility = 'hidden' 
    } 
    function showContent(){ 
     document.getElementById('tc1').style.visibility = 'visible' 
    } 
</script> 
</head> 
<body> 
    <a href="javascript: hideTab()">Hide Tab</a><br /> 
    <a href="javascript: showTab()">Show Tab</a><br /> 
    <a href="javascript: hideContent()">Hide Content</a><br /> 
    <a href="javascript: showContent()">Show Content</a><br /><br /> 
    <div id="tab1" style="background:yellow;width:100px"> 
     <div id='tc1'>Content Text</div> 
    </div> 
</body> 
</html>

w IE8 kliknij 'Hide Tab', a następnie 'Pokaż Tab' to działa OK. Po wyświetleniu zakładki kliknij "Ukryj zawartość", a następnie "Pokaż zawartość" Jest to również poprawne. Teraz ponownie kliknij "Ukryj kartę" i powinieneś zobaczyć, jak karta zniknie, ale treść pozostanie niepoprawnie.

W IE8 problem znika, gdy korzystam z trybu zgodności. Ponadto zauważyłem, że jeśli usunę element DOCTYPE, nie mogę zreplikować problemu.

W Chrome (mój osobisty faworyt) problem jest trwały, niezależnie od elementu DOCTYPE. Nie próbowałem tego w firefoxie.

Jestem pewien, że istnieje bardzo dobry powód takiego zachowania, jestem również pewien, że będzie proste rozwiązanie, które sprawi, że moje zakładki będą działały poprawnie. Czekam na wasze komentarze.

Źródło

2010-01-21 SausageFingers

Dzieje się tak dlatego, że właściwość CSS "widoczność" jest dziedziczona, ale nie ma wpływu na układ strony. Dlatego jeśli ustawisz element, który ma być ukryty, wszystkie jego elementy potomne będą takie, chyba że wyraźnie je ustawisz (co jest przypadkiem, określając visibility: visible).

Musisz zresetować właściwość CSS, aby była dziedziczona, aby uzyskać pożądane zachowanie. Można to zrobić za pomocą słowa kluczowego inherit jako wartość: visibility: inherit

EDIT lub, jak javascript:

element.style.visiblity = 'inherit';

Źródło

2010-01-21 20:46:24 zneak

zneak - Wielkie dzięki, to rozwiązało mój problem. Zgodnie z twoją radą ustawiam każdy element na "dziedziczony" po zmianie na "widoczny", a problem jest naprawiony. Dziękuję Ci. – SausageFingers

Zamiast ustawić widzialność elementu podrzędnego na "widoczny", ustaw go na "dziedziczenie" - wtedy będzie on przestrzegał ustawienia widoczności dla rodziców zamiast nadpisywać je niezależnie.

Źródło

2010-01-21 20:45:02

Zakładam, że Twój przykład jest uproszczone, a w rzeczywistym kodzie masz wiele kart . W takim przypadku jestem zaskoczony, że odpowiedzi na wysłane wiadomości pracowały dla Ciebie. Czy nie chcesz zachować widoczności tc1 po powrocie do tab1? Jeśli tak, to trzymać się oryginalnego pomysłu jednak modyfikować funkcje zakładki jak pokazano:

function hideTab(){ 
    document.getElementById('tab1').style.display = 'none' 
} 
function showTab(){ 
    document.getElementById('tab1').style.display = 'block' 
}

Zauważ, że jestem modyfikujący właściwości wyświetlania na div nadrzędnego - nie jest właściwość widoczności.

Źródło

2010-12-12 21:56:22

Widoczność stylu CSS nie działa zgodnie z oczekiwaniami

Odpowiedz

Powiązane problemy