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

最佳答案

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

关于html - 基础部分,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/18678564/

10-12 13:01
查看更多