기초의 반응 형 탭 5

Question

기초 프레임 워크를 사용하여 탭을 반응 형으로 만들려면 어떻게해야합니까?

는 내가 반응 창에서이 같은 출력을 얻고있다 : 당신이 링크를 제공 (또는 온라인 작업을 게시) 더 나은 응답을주십시오 수 있다면

<ul class="tabs" data-tab role="tablist"> 
    <li class="tab-title active" role="presentational" ><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li> 
    <li class="tab-title" role="presentational" ><a href="#panel2-2" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">Tab 2</a></li> 
    <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li> 
    <li class="tab-title" role="presentational" ><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">Tab 4</a></li> 
</ul> 
<div class="tabs-content"> 
    <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1"> 
    <h2>First panel content goes here...</h2> 
    </section> 
    <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2"> 
    <h2>Second panel content goes here...</h2> 
    </section> 
    <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3"> 
    <h2>Third panel content goes here...</h2> 
    </section> 
    <section role="tabpanel" aria-hidden="true" class="content" id="panel2-4"> 
    <h2>Fourth panel content goes here...</h2> 
    </section> 
</div> 

Answer 1

.

문서를 아직 읽었습니까? 당신이 가까이 보면 Zurb Accordion

Zurb Tabs

• 은 두 페이지에 대한 예제가있다. 귀하의 스크린 샷에 따르면 반응이 좋은 기초 5 탭은 정확히 그들이 어떻게해야 하는지를 보여줍니다. 또한 Chrome의 관리자 또는 FF의 방화범보다 더 많은 도움을 줄 수있는 결과를 위해 "반응 형 북마크 도구"에 대한 웹 검색을 수행하는 것이 좋습니다.

  이 조각과 코드를 교체하고 길을 따라, 당신이 필요로하는 내용으로 대체 - 하나 개의 탭에서-A-시간 :

  <dl class="tabs" data-tab> 
      <dd class="active"><a href="#panel1">Tab 1</a></dd> 
      <dd><a href="#panel2">Tab 2</a></dd> 
      <dd><a href="#panel3">Tab 3</a></dd> 
  </dl> 
  <div class="tabs-content"> 
      <div class="content active" id="panel1"> 
       <p>This is the first panel of the basic tab example. This is the first panel of the basic tab example.</p> 
      </div> 
      <div class="content" id="panel2"> 
       <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p> 
      </div> 
      <div class="content" id="panel3"> 
       <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p> 
      </div> 
  </div>