CSS 스타일 가시성이 예상대로 작동하지 않습니다.

기본 탭 컨트롤이있는 html 페이지가 있습니다. 탭 및 탭 콘텐츠 div를 표시하거나 숨기려면 javascript를 사용합니다. 내 문제는 탭 콘텐츠 div 중 하나의 요소가 '숨김'으로 변경된 다음 다시 '표시'로 변경되면 요소가 원래 div 컨테이너를 잊어 버리거나 원래대로 유지되는 것처럼 보입니다. 부모의 시정. 설명하기CSS 스타일 가시성이 예상대로 작동하지 않습니다.

다음 예를 살펴 : IE8에서

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

이 괜찮 작동 후 '쇼 탭'탭을 숨기기 '를 클릭합니다. 탭이 표시된 상태에서 '콘텐츠 숨기기'를 클릭 한 다음 '콘텐츠 표시'를 클릭하십시오. 이제 '탭 숨기기'를 다시 클릭하면 탭이 사라졌지만 내용이 잘못 표시됩니다.

IE8에서 호환 모드를 사용할 때 문제가 사라집니다. 또한 DOCTYPE 요소를 제거하면 문제를 복제 할 수 없다는 것을 알았습니다.

크롬 (내 개인적으로 좋아하는) 문제는 DOCTYPE 요소에 관계없이 지속됩니다. 나는 파이어 폭스에서 이것을 시도하지 않았다.

이 동작에는 매우 좋은 이유가있을 것이라고 확신합니다. 탭이 제대로 작동하도록하는 간단한 해결책이 될 것이라고 확신합니다. 나는 당신의 의견을 기다리고 있습니다.

출처

2010-01-21 SausageFingers

CSS 속성 'visibility'가 상속되었지만 페이지 레이아웃에 영향을주지 않기 때문입니다. 따라서 요소를 숨김으로 설정하면 명시 적으로 표시하지 않는 한 모든 자식이 나타납니다 (visibility: visible을 지정하는 경우).

원하는 동작을 얻으려면 상속 할 CSS 속성을 재설정해야합니다. 자바 스크립트로 visibility: inherit

편집 또는 : 당신은 값으로 inherit 키워드를 사용하여 수행 할 수 있습니다

element.style.visiblity = 'inherit';

출처

2010-01-21 20:46:24 zneak

zneak - 고마워요. 내 문제가 해결되었습니다. 당신이 조언했듯이, 나는 'visible'로 변경 한 후에 각 요소를 '상속'으로 설정하고 문제가 해결되었습니다. 고맙습니다. – SausageFingers

자식 요소의 가시성을 '가시'로 설정하는 대신 '상속'으로 설정하면 독립적으로 재정의하는 대신 부모의 가시성 설정을 따릅니다.

출처

2010-01-21 20:45:02

나는 가정 당신의 예제가 단순화된다, 그리고 실제 코드에서 여러 탭이 . 이 경우 나는 게시 된 답변이 당신에게 효과적 이었음에 놀랐습니다. tab1로 돌아 가면 tc1의 가시성을 유지 하시겠습니까? 당신이 할 경우, 원래의 아이디어에 충실하지만, 같이 탭 기능을 수정 : 나는 부모 DIV의 디스플레이 속성을 수정하고

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

주 -하지 가시성 속성을.

출처

2010-12-12 21:56:22

CSS 스타일 가시성이 예상대로 작동하지 않습니다.

답변

관련 문제