오직 HTML CSS로 UL 탭을 만드는 방법

어떻게하는지 이해하려고 노력합니다. 스타일은 있지만 탭을 클릭하면 어떤 일이 발생하기를 바랍니다. 내가 탭을 클릭하면 표시하고 숨길 탭 클래스 이름을 가진 div를 원합니다. 그게 어떻게 작동하는지 추측하고 있습니다. 지금 탭을 클릭하면 아무 일도 일어나지 않습니다. 떠내려 <li> 요소 당신의 <ul> 요소가 제로 높이 때문에오직 HTML CSS로 UL 탭을 만드는 방법

여기

<style type="text/css"> 
     ul.tabs { 
      display: table; 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
     } 

     ul.tabs>li { 
      float: left; 
      padding: 10px; 
      background-color: lightgray; 
     } 

     ul.tabs>li:hover { 
      background-color: lightgray; 
     } 

     ul.tabs>li.selected { 
      background-color: lightgray; 
     } 

     div.content { 
      border: 1px solid black; 
     } 

     ul { overflow: auto; } 

     div.content { clear: both; } 
    </style> 
<body> 
    <ul class="tabs"> 
     <li><a href="#tab1">Description</a></li> 
     <li><a href="#tab2">Specs</a></li> 
    </ul> 
    <div class="pane"> 
     <div class="tab1"> 
      <div><h2>Hello</h2></div> 
     <div /> 
     <div>Hello hello hello.</div> 
     <div /> 
     <div>Goodbye goodbye, goodbye</div> 
     <div /> 
     <div /> 

     </div> 
     <div class="tab2" style="display:none;"> 
     <div><h2>Hello2</h2></div> 
     <div /> 
     <div>Hello2 hello2 hello2.</div> 
     <div /> 
     <div>Goodbye2 goodbye2, goodbye2</div> 
     <div /> 
     </div> 
    </div> 
    <div class="content"> 
     This should really appear on a new line. 
    </div> 
</body>

출처

2012-01-03 Michiko

은 어디에도 가지 않습니다. 아니면 tab1과 tab2 클래스가 ids라고 생각 했습니까? –

표준 대답은 당신의 CSS에 ul { overflow: auto; } 및 div.content { clear: both; }를 추가 : 당신은 할 수 없습니다. 불행히도 HTML/CSS2만으로이 작업을 수행 할 수있는 방법은 없습니다. :hover 가짜 클래스를 사용하여 CSS에서 드롭 다운을 만들 수 있지만 클릭 수에는 해당하는 항목이 없습니다. 이 중 하나를보십시오 Javascript-based solutions.

비밀 대답 : CSS3 [종류의] 이것을 지원합니다. 하지만 라디오 버튼을 만들어야하는데 IE7/8에서는 지원되지 않습니다. If you dare...

자바 스크립트 사용에 신경 쓰지 않는다면 다음과 같은 간단한 해결책이 있습니다. HTML을 다시 포맷합니다. <h2>을 <div>에 넣을 필요가 없으며 휴식을 위해 <br />을 사용하십시오. 이것이 그 때문입니다. 또한 탭 대신 <div>을 사용하여 클래스 대신 ID를 사용하도록 변경했습니다. 요소에 대한 고유 식별자가있는 경우 id을 사용하십시오.

<ul class="tabs"> 
    <li><a href="#tab1">Description</a></li> 
    <li><a href="#tab2">Specs</a></li> 
</ul> 
<div class="pane"> 
    <div id="tab1"> 
     <h2>Hello</h2> 
     <p>Hello hello hello.</p> 
     <p>Goodbye goodbye, goodbye</p> 
    </div> 
    <div id="tab2" style="display:none;"> 
     <h2>Hello2</h2> 
     <p>Hello2 hello2 hello2.</p> 
     <p>Goodbye2 goodbye2, goodbye2</p> 
    </div> 
</div> 
<div class="content">This should really appear on a new line.</div>

CSS를 건드리지 않았습니다.

자바 스크립트의 경우 jQuery을 사용하는 것이 좋습니다. 은 실제로 일을 단순화합니다. 당신이 필요로하는 모든 코드 줄 수 있습니다 : 페이지는 탭 ul의 아이의 모든 링크를 찾아, [로드] 준비가되면,

$(document).ready(function() { 
    $("ul.tabs a").click(function() { 
     $(".pane div").hide(); 
     $($(this).attr("href")).show(); 
    }); 
})

기본적으로. 이 링크를 클릭 할 때마다 실행되는 함수를 연결하십시오. 링크를 클릭하면 .pane div의 모든 탭을 숨 깁니다. 그런 다음 링크의 href을 사용하여 적절한 탭 div를 찾아서 표시하십시오.

바이올린 : http://jsfiddle.net/uFALn/18/

출처

2012-01-03 05:42:14 benesch

내 HTML입니다.

시도

출처

2012-01-03 05:40:37

감사 benesch. 그것은 나에게도 도움이되었다.

return false을 추가하여 앵커로 저키가 점프하는 것을 방지 할 수도 있습니다. 예를 들면 다음과 같습니다.

$("ul.tabs a").click(function() { 
    $(".pane div").hide(); 
    $($(this).attr("href")).show(); 
    return false; 
});

출처

2013-03-27 16:47:16

오직 HTML CSS로 UL 탭을 만드는 방법

답변

관련 문제