基础部分

Question

我正在尝试通过单击页面上的链接来访问Foundation 4部分。这是我的问题更详细解释。这就是Foundation中的部分：

这是代码。

<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部分时，它会打开第1部分的内容。第2部分和第3部分的内容相同。现在，有没有办法在网站上的某个位置发布链接，例如链接到第1,2节3.当您单击其中一个时，它将在部分部分上进行，并将根据我们点击的链接打开正确的部分内容。

Answer 1

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

Checkout深层链接部分，了解如何使此功能正常运行的示例。

这是一个简单的例子;

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

要使链接正常工作，只需将ID添加到您的网址即可。例如。 http://someurl.com/#section2