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

＆GT;

的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

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

1 个答案: