使用按钮单击淡出/淡入单独的 div [关闭]答案

【问题标题】：Fade out/in sperate divs with button click [closed]使用按钮单击淡出/淡入单独的 div [关闭]
【发布时间】：2012-12-18 22:52:41
【问题描述】：

我看到了一个 flash 网站，现在很好奇这是否可以使用 Jquery 构建，显然不是全部。我更希望通过单击按钮来淡出 div1 和 div2 。这是示例站点： www.justinfarrellyconstruction.com

示例：如果我来到主页并单击投资组合按钮，Gallery Div 将淡出然后淡入另一个图像。同时 Text div 将淡出其内容并加载投资组合文本。

如果这没有意义，我很抱歉，这对我来说都是全新的，我正在努力学习。

【问题讨论】：

嗯，答案是肯定的。我怀疑这里的任何人都会为你写整件事。

标签： javascript jquery html fade

【解决方案1】：

你的问题很模糊，但希望这个例子能让你朝着正确的方向开始：http://jsfiddle.net/3mJ3z/

基本上，有 3 个菜单项和 3 个对应的内容项。单击菜单项时，所有其他内容项都会消失，相应的内容项会淡入。HTML：

<div class="item-1 content-item">
    I am the content for item 1
</div>

<div class="item-2 content-item" style="display: none;">
    I am the content for item 2
</div>

<div class="item-3 content-item" style="display: none;">
    I am the content for item 3
</div>

<ul>
    <li class="change-item" data-item="1">Item 1</li>
    <li class="change-item" data-item="2">Item 1</li>
    <li class="change-item" data-item="3">Item 1</li>
</ul>

JS：

$('.change-item').click(function(){
    var this_item = $(this).attr("data-item");
    $('.content-item').hide();
    $('.item-' + this_item).fadeIn();
});

【讨论】：

您好爱斯基摩人，感谢您的回复。如果我的问题含糊不清，我深表歉意。我真的怀疑这里的任何人都会为我写整件事，我不希望他们这样做。我是 Jquery 的新手，只是想弄清楚如何实现这一点。我实现了将文本 div 换出的第一部分。现在只是想弄清楚单击“数据项 2”按钮后如何换出图像 div。也许我的措辞不正确。再次感谢您的帮助。
嗨爱斯基摩人，所以我支持你的例子，向你展示我想要做什么。我确定代码是错误的，但是从示例中您可以看到我正在尝试完成的工作，但代码正确完成。 jsfiddle.net/3mJ3z/17