1

我正在为客户制作一个单页网站。有 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>

像下面这样的 Div：

<div class="designcontent">
Design Content Here
</div>
<div class="aboutuscontent">
About us Content Here      
</div>

因此，如果我单击 DESIGN，它将显示设计内容，然后如果我单击 ABOUT US，它将显示 aboutuscontent 等等。

我要一个简写代码

        $("#design").click(function(){
        $('.homecontent').fadeOut(500);
        $('.designcontent').delay(500).fadeIn(1000);
        return false;
        });

        $("#home").click(function(){
        $('.designcontent').fadeOut(500);
        $('.homecontent').delay(500).fadeIn(1000);
        return false;
        });

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

我在下面有这个 jQuery 代码来获取 id 并在 Array 中使用它们并在加载时隐藏内容：

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

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

我希望我的问题足够清楚，如果不是，我可以在 jsFiddle 上提供视觉示例。

感谢您花时间阅读我的问题

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

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

1 回答 1

2

您可以使用类似的名称作为id锚点及其目标元素的class名称：

html:

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

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

js：

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

演示

于 2012-07-07T08:56:46.157 回答