如何使用JavaScript隐藏菜单项直到点击显示第一个菜单项内容

我有3个图像作为菜单项。当您点击图片时，会显示图片下方的div。当您单击每个菜单项时，会显示框中的内容。我需要将第一个菜单项的内容显示为默认值。现在所有的菜单项内容都是隐藏的。任何帮助将不胜感激！如何使用JavaScript隐藏菜单项直到点击显示第一个菜单项内容

以下是我有：

的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; 
}

来源

2013-10-09 user2862620

试试这个

(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

来源

2013-10-09 12:10:53 nrsharma

如何使用JavaScript隐藏菜单项直到点击显示第一个菜单项内容

回答

相关问题