javascript - 如何使用隐藏菜单项直到单击的javascript显示第一个菜单项内容

Question

我有 3 张图片作为菜单项。当您单击图像时，会显示一个包含图像下方内容的 div。单击每个菜单项时，将显示框中的内容。我需要默认显示第一个菜单项的内容。现在所有的菜单项内容都被隐藏了。任何帮助将不胜感激！

这是我所拥有的：

html

<div class="dupImage img" data-menu="duplication"><img /></div>
<div class="repImage img" data-menu="replication"><img /></div>
<div class="shareImage img" data-menu="share"><img /></div>

<div class="menuitem" id="duplication">
    <h3>Create</h3>
  Some text here to describe create
</div>

<div class="menuitem" id="replication">
    <h3>Find Insights</h3>
  Some text here to describe Find Insights
</div>

<div class="menuitem" id="share">
    <h3>Share & Publish</h3>
  Some text here to describe Share & Publish
</div

>

Javascript

(function ($) {
var menu;
$(document).ready(function(){
    $('.menuitem').hide();
    $('.img').click(function () {
        menu = $("#" + $(this).data("menu"));
        $(".menuitem:not(#" + menu.attr("id") + ")").fadeOut(0,function(){
             menu.fadeIn(800);
        });
    });   
});
})(jQuery);

CSS：

.img {
    width:50px;
    height:50px;
    margin: 10px;
    display: inline-block;
    background-color: #D4D4D4;
}

Answer 1

尝试这个

(function ($) {
var menu;
$(document).ready(function(){
    $('.menuitem').not(':first').hide();
    $('.img').click(function () {
        menu = $("#" + $(this).data("menu"));
        $(".menuitem:not(#" + menu.attr("id") + ")").fadeOut(0,function(){
             menu.fadeIn(800);
        });
    });   
});
})(jQuery);

这是工作中的FIDDLE