javascript - 使用 jQuery 显示/切换每个元素在任何特定时刻仅在屏幕上显示一个

Question

我有一些链接：

1. 关于
2. 文件夹
3. 恢复

当我单击“关于”时，我希望显示关于元素，但要隐藏 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

您可以使用以下选择器隐藏articles页面加载：

$('.mn_pages > article').hide();

然后以下显示/隐藏正确的元素：

$('#topMainNav li').on('click', function(e) {
  e.preventDefault();
  $('.mn_pages > article').hide().eq($(this).index()).show();
});

这是一个小提琴

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();
            });
        });
});