javascript - jQueryを使用して、特定の瞬間に画面上に1つだけを表示する各要素を表示/切り替えます

Question

私はいくつかのリンクを持っています：

1. 約
2. ポートフォリオ
3. 履歴書

[About] をクリックすると、About 要素が表示されますが、Portfolio 要素と Resume 要素は非表示になります (パターンなどによって)...

私のコードは次のように構成されています（必要な部分にクリップされています）：

HTML:

<section id="attCatch">
    <div class="container_12">
        <h1 class="attCatchText">The name's Jake. I like to make things.</h1>
        <nav id="topMainNav">
            <ul>
                <li><a href="#" title="#" class="aboutLink">About</a></li>
                <li><a href="#" title="#" class="portfolioLink">Portfolio</a></li>
                <li><a href="#" title="#" class="resumeLink">Resume</a></li>
            </ul>
        </nav>
    </div>
</section>
<section id="contentLoader">
    <div class="container_12">
    <section class="mn_pages">
        <article class="about_page">
            <h1>About stuff</h1>
        </article>

        <article class="portfolio_page">
            <h1>Portfolio stuff</h1>
        </article>

        <article class="resume_page">
            <h1>Resume stuff</h1>
        </article>
    </section>
    </div>
</section>

jQuery:

$(document).ready(function(){
     $('.mn_pages').hide();
     var i = 0;
     $('.topMainNav').each(function(){
         $(this).click(function(){ 
             $('.mn_pages:eq('+$(this).data('idf')+')').toggle('slow');
         });
         $(this).data('idf',i);
         i++;
    });
});

私のjQueryコードはうまくいくと思っていましたが、そうではありません。

JSフィドルが含まれています。http://jsfiddle.net/MsYdJ/

Answer 1

このようにすることができます：

トライアウト用のフィドル

$(function(){
   $('.mn_pages').find('article').hide(); // <---HIDES ON PAGE LOAD
   $('#topMainNav a').click(function(e){
      e.preventDefault();
      var page = $(this).text().toLowerCase();
      $('.mn_pages').find('article').hide(); // <---OPENED ONE HIDES
      $('[class="'+page+'_page"]').show(); //<------CLICKED ONE SHOWS
   });
});

Answer 2

Answer 3

これは、クラス/ID 名を一定にする必要がある実装であり、リンクの名前をいつでも変更できます。これはフィドルです。

$(document).ready(function () {
        $('#contentLoader .mn_pages').children().hide();
        $('#topMainNav li').each(function () {
            var targetClass=($(this).children().attr("class")).replace("Link","_page");
            $(this).bind("click",function(){
                $("#contentLoader .mn_pages").children().hide();
                $("#contentLoader .mn_pages ."+targetClass).show();
            });
        });
});