0

我正在尝试通过单击页面上的链接来访问 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 节的链接。当您单击其中一个时，它将进入部分部分，并将根据我们单击的链接打开正确的部分内容。

4

1 回答 1

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

于 2013-09-16T04:05:01.433 回答