基础部分

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

查看深度链接部分，了解如何使此功能工作的示例。

这里有一个简单的例子；

<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添加到您的URL即可。例如：http://someurl.com/#section2