单页淡入和淡出过渡逻辑
我正在为一个客户制作一个单页的网站。 有3个不同的菜单组，但在此示例中，我将其简化为一个菜单和更少的内容。
我有这个导航：
和Divs类似：
Design Content Here About us Content Here
因此，如果我点击设计它将显示设计内容，然后如果我点击关于我们它将显示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; })
你可以使用类似的名称作为锚的id和它的目标元素的class ：
HTML：
DESIGN Design Content Here
JS：
$("ul li a").click(function(){ var cls = $(this).attr('id') $(".content").fadeOut(500); $('.' + cls).delay(500).fadeIn(1000); return false; })
DEMO