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

How to display first menu item content with javascript that is hidding menu items until clicked

本文关键字：菜单项 显示 javascript 第一个 隐藏 何使用 隐藏菜单 单击      更新时间：2023-09-26

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

这是我所拥有的：

目录

<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

>

爪哇语

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

试试这个

(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);

这是工作小提琴

相关文章：