기초 섹션

Question

페이지의 링크를 클릭하여 Foundation 4 섹션에 액세스하려고합니다. 여기에 내 문제가 자세히 설명되어 있습니다. 여기

그리고 그것을위한 코드입니다 :이처럼 재단의 어떤 부분입니다.

<div class="section-container vertical-tabs" data-section="vertical-tabs"> 
    <section> 
    <p class="title" data-section-title><a href="#">Section 1</a></p> 
    <div class="content" data-section-content> 
     <p>Content of section 1.</p> 
    </div> 
    </section> 
    <section> 
    <p class="title" data-section-title><a href="#">Section 2</a></p> 
    <div class="content" data-section-content> 
     <p>Content of section 2.</p> 
    </div> 
    </section> 
    <section> 
    <p class="title" data-section-title><a href="#">Section 3</a></p> 
    <div class="content" data-section-content> 
     <p>Content of section 3.</p> 
    </div> 
    </section> 
</div> 

는 제 1 클릭 , 그것은에 예를 들어, 링크, 사이트 어딘가에 링크를 게시 할 수있는 방법이 지금 2 절과 3 절 1. 같은 일의 내용을 엽니 다 섹션 1, 2 및 3 중 하나를 클릭하면 섹션 섹션으로 이동하고 클릭 한 링크를 기반으로 오른쪽 섹션 콘텐츠가 열립니다. 이 기능이 작동하게하는 방법의 예는

Answer 1

http://foundation.zurb.com/docs/components/section.html

체크 아웃 딥 링크 섹션.

다음은 간단한 예입니다.

<div class="section-container auto" data-section data-options="deep_linking: true"> 
    <section> 
    <p class="title" data-section-title><a href="#section1">Section 1</a></p> 
    <div class="content" data-slug="section1" data-section-content> 
     <p>Content of section 1.</p> 
    </div> 
    </section> 
    <section> 
    <p class="title" data-section-title><a href="#section2">Section 2</a></p> 
    <div class="content" data-slug="section2" data-section-content> 
     <p>Content of section 2.</p> 
    </div> 
    </section> 
</div> 

링크를 작동 시키려면 URL에 ID를 추가하면됩니다. 예. http://someurl.com/#section2