1

以下は、私が行っている単一ページの Web サイトの疑似コードです。スクロールベースではない単一ページの Web サイトを作成できる必要があります (これが一般的です)。ここでの考え方は、私のサイトにはnavユーザーがメニューを選択する場所があり、選択したメニューに応じて、コンテンツ div に正しいページ div がレンダリングされるということです。

これらpage divsも HTML 内にあり、正しいメニューが選択されていない限り (または、ページを Javascript ファイルに配置する方が良い場合)、表示されるべきではありません。

<nav>
 <ul>
   <li>menu1</li>
   <li>menu2</li>
 </ul>
</nav>

<div id="content">
  <!-- content will be from page divs below -->
</content>

<div id="page1"> <!-- for menu1 -->
 <div>the content</div>
</div>

<div id="page2"> <!-- for menu2 -->
 <div>the content</div>
</div>

jQueryでこれをどのように達成できますか?

4

6 に答える 6

0

さまざまなコンテナーにプリロードされたコンテンツを表示するには、いくつかの CSS でアンカー タグを使用できます。

HTML

<a href="#page1">a</a>
<a href="#page2">b</a>
<a href="#page3">c</a>

<div id="page1" class="page"> this is page1 id</div>
<div id="page2" class="page"> this is page2 id</div>
<div id="page3" class="page"> this is page3 id</div>

CSS

#page1, #page2, #page3{
    display:none;
}
#page1:target{
    display:block;
}
#page2:target{
    display:block;
}
#page3:target{
    display:block;
}
于 2013-11-14T05:32:19.040 に答える
0

このコードを使用して、あなた#page1と#page2divが最初に非表示 になっていることを確認してください

  jQuery(document).ready(function(){

     jQuery('li').click(function(){

        var new_index = parseInt(jQuery(this).index())+1;

        jQuery("div[id*='page']").hide();
        jQuery('#page'+new_index).show();

     });
  });


<nav>
 <ul>
   <li>menu1</li>
   <li>menu2</li>
 </ul>
</nav>

<div id="content">
  <!-- content will be from page divs below -->
</content>

<div id="page1" style="display:none";> <!-- for menu1 -->
 <div>the content 1</div>
</div>

<div id="page2" style="display:none";> <!-- for menu2 -->
 <div>the content 2</div>
</div>
于 2013-11-14T05:49:33.303 に答える