Question

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

和Divs类似：

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

所以，如果我点击“设计”，它会显示设计内容，然后如果我点击“关于我们”，它会显示关于内容的信息，等等。

我要求提供

的简写代码

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

Answer 1

您可以为锚的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;
})

DEMO

One Page fadeIn＆amp; fadeOut Transition Logic

1 个答案: