CSS DIV 고정 높이가없는 스왑?

Question

div에 고정 된 높이가없는 경우 CSS 만 사용하여 간단한 div 스왑을 수행 할 수 있는지 궁금합니다. 나는 광범위하고 광범위한 답변을 찾았으며 그 문제에 관해 솔직한 논의를하지 않았다.

아이디어는 팽창성 맥주 목록을 4 개의 별도 div로 나누어 한 번에 하나씩 만 표시하는 것입니다. 해당 앵커를 클릭하면 표시되는 div가 전환되어 다른 세 개의 앵커가 숨겨집니다. 첫 번째 div는 페이지가로드 될 때 표시됩니다. 나는 약간의 경험을 가지고 성공을 거두었지만 가장 중요한 div는 그 뒤에있는 다른 모든 div를 숨길 것이기 때문에 고정 된 크기로만 이루어졌습니다.

이러한 특정 div에는 서식이 지정된 테이블과 정렬되지 않은 목록이 포함됩니다. 그게 어떤 영향을 미치는지 확신 할 수는 없지만, 단지 그럴 가치가 있다고 생각했습니다. div의 항목 수는 다양하기 때문에 div의 높이를 고정 할 수 없습니다. 나는 확실하지 않다으로는 시간 투자 가치가 있지만, HTML은 같은 것을 볼 것인지 나는 아직 그것을 구분하지 않은 :

<div id="secondaryNav">  
    <ul> 
    <li>Link to div1</li> 
    <li>Link to div2</li> 
    <li>Link to div3</li> 
    <li>Link to div4</li> 
    </ul> 
</div> 

<div id="swappedContent"> 
    <div id="1"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="2"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="3"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="4"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
</div><!--swappedContent--> 

난 후이 레이아웃을 모델링하고 예를 발견 (즉, 자바 스크립트를 사용합니다) 나는 여기 소유하지 않는 사이트에 연결하는 것이 타당하다고 확신하지 못합니다. 명확히하기 위해 링크해야한다면 알려주세요.

Answer 1

CSS "디스플레이"사용을 시도 중입니다. 각 사업부에서 수행

<div id="myDiv" style="display:none;"> 

그리고 당신은 사업부를 표시 할 때 다음, 자바 스크립트에서 다음을 수행하십시오

: 그래서 결국

document.getElementById("myDiv").style.display = "block"; 

을, 당신은 같은이있을 것이다

<div id="secondaryNav">  
    <a href="javascript:void(0)" onclick="showDiv('1')">Link to div1</a> 
    <a href="javascript:void(0)" onclick="showDiv('2')">Link to div2</a> 
    <a href="javascript:void(0)" onclick="showDiv('3')">Link to div3</a> 
    <a href="javascript:void(0)" onclick="showDiv('4')">Link to div4</a> 
</div> 

<div id="swappedContent"> 
    <div id="1"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="2" style="display:none;"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="3" style="display:none;"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
    <div id="4" style="display:none;"> 
    <table> 
     <tr>content</tr> x 40-50 
    </table> 
    </div> 
</div> 

<script type="text/javascript"> 
function showDiv(divId) { 
    for (i = 1; i <= 4; i++) { 
     document.getElementById(i).style.display = "none"; 
    } 

    document.getElementById(divId).style.display = "block"; 
} 
</script> 

참고 : 스크립트를 적절한 위치 (일반적으로 요소에 있음)에 두십시오.