Jquery 一页fadeIn&；衰减转换逻辑

我正在为客户制作一个单页网站。有3个不同的菜单组，但在本例中，我将其简化为一个菜单和更少的内容

我有以下导航：

    <nav>
        <ul id="main" class="toggle">
            <li><a id="design" href="#">DESIGN</a></li>
            <li><a id="contactus" href="#">CONTACT US</a></li>
            <li><a id="aboutus" href="#">ABOUT US</a></li>
            <li><a id="news" href="#">NEWS</a></li>
        </ul>
    </nav>

因为如果有很多页面，如果我的客户想要添加一个新的页面，它会变得越来越复杂

我使用下面的jQuery代码获取id并在数组中使用它们，并隐藏加载时的内容：

$('#main li a').each(function(){
  liIds.push('.'+ $(this).attr('id')+'content');
  $(''+liIds).hide();   
})

我缺少的是，每次单击菜单链接时都会显示正确的内容

我希望我的问题足够清楚，否则我可以在JSFIDLE上提供可视化示例

感谢您抽出时间阅读我的问题

我的问题通过以下方式解决：

$("a").click(function(){
    var cls = $(this).attr('id')
     $('.' + cls + 'content').addClass('onpage');
    $('.onpage').fadeOut(500);
    $('.' + cls + 'content').delay(500).fadeIn(1000);
    return false;
})

---

您可以为锚点的

id

及其目标元素的

类使用类似的名称：

html:

谢谢你的回答，它很有效，但问题是，我还有很多其他div，比如页眉、页脚。如果我使用$（“.active”）。fadeOut（500）；，也许在content div中添加“active”类并每次切换它们会有所帮助？只是一个想法。@Tumay是的，这是一个例子，你可以用一个类名来代替div选择内容标签，试试更新的答案。谢谢@undefined使用一个单独的类解决了我的问题：）只剩下一件事了，但这与我在这里问的问题无关。如果我不能解决它，我可能会再次出错：）
$('#main li a').each(function(){
  liIds.push('.'+ $(this).attr('id')+'content');
  $(''+liIds).hide();   
})

$("a").click(function(){
    var cls = $(this).attr('id')
     $('.' + cls + 'content').addClass('onpage');
    $('.onpage').fadeOut(500);
    $('.' + cls + 'content').delay(500).fadeIn(1000);
    return false;
})

<li><a id="design" href="#">DESIGN</a></li> 

<div class="design content">
   Design Content Here
</div>

$("ul li a").click(function(){
    var cls = $(this).attr('id')
    $(".content").fadeOut(500);
    $('.' + cls).delay(500).fadeIn(1000);
    return false;
})