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>

リンクを機能させるには、URL に ID を追加するだけです。例えば。http://someurl.com/#section2

于 2013-09-16T04:05:01.433 に答える