0

コンテンツの異なるビットに対して異なるページをロードするのではなく、1 ページしかないサイトで作業しています。ページではなくコンテンツを変更したいので、読み込みが減り、素晴らしい効果が生まれます。

以下の私のコードからわかるように、それは長いですが、うまくいきます。それを実行し、div 間でアニメーション化するもっと簡単な方法があると確信しています。

http://jsfiddle.net/ssLY3/

HTML

<ul class="side-nav" id="sideNav">
  <li id="homeNav"><a href="#">Home</a></li>
  <li id="bioNav"><a href="#">Biography</a></li>
  <li id="musicNav"><a href="#">Music</a></li>
  <li id="photosNav"><a href="#">Photos</a></li>
  <li id="shopNav"><a href="#">Shop</a></li>
</ul>
<div id="homePage">
  <p>HOME PAGE</p>
</div>
<div id="biogPage">
  <p>BIOG PAGE</p>
</div>
<div id="musicPage">
  <p>MUSIC PAGE</p>
</div>
<div id="photosPage">
  <p>PHOTOS PAGE</p>
</div>
<div id="shopPage">
  <p>SHOP PAGE</p>
</div>

JS

$('#biogPage').hide();
$('#musicPage').hide();
$('#photosPage').hide();
$('#shopPage').hide();

$('#homeNav').click(function () {
  $('#homePage').show();
  $('#biogPage').hide();
  $('#musicPage').hide();
  $('#photosPage').hide();
  $('#shopPage').hide();
});

$('#bioNav').click(function () {
  $('#homePage').hide();
  $('#biogPage').show();
  $('#musicPage').hide();
  $('#photosPage').hide();
  $('#shopPage').hide();
});

$('#musicNav').click(function () {
  $('#homePage').hide();
  $('#biogPage').hide();
  $('#musicPage').show();
  $('#photosPage').hide();
  $('#shopPage').hide();
});

$('#photosNav').click(function () {
  $('#homePage').hide();
  $('#biogPage').hide();
  $('#musicPage').hide();
  $('#photosPage').show();
  $('#shopPage').hide();
});

$('#shopNav').click(function () {
  $('#homePage').hide();
  $('#biogPage').hide();
  $('#musicPage').hide();
  $('#photosPage').hide();
  $('#shopPage').show();
});
4

3 に答える 3

0

HTML をできるだけ変更しない別の方法:

HTML:

<ul class="side-nav" id="sideNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Music</a></li>
</ul>

<div id="home" class="page"><p>HOME PAGE</p></div>
<div id="blog" class="page"><p>BLOG PAGE</p></div>
<div id="music" class="page"><p>MUSIC PAGE</p></div>

Javascript:

$(document).ready(function(){
    var hideall = function() {
        $(".page").each(function() {
            $(this).hide();
        });
    };
    hideall();

    $(".side-nav li a").each(function() {
        $(this).click(function() {
            var ta = $(this).text().toLowerCase();
            hideall();
            $("#"+ta).show();
        });
    });


});
于 2013-05-13T03:39:52.853 に答える