如何使用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隱藏菜單項直到點擊顯示第一個菜單項內容

回答

相關問題