Javascript菜单显示一个图像和隐藏另一个

Javascript Menu to Show 1 image and hide another

本文关键字：图像 一个 隐藏 另一个 菜单 显示 Javascript      更新时间：2023-09-26

我有一个简单的菜单栏，用于显示几个不同的菜单。当我点击第一个图像出现，但当我点击第二个我需要第一个消失，第二个出现在它的位置。

现在的情况是，我点击"主菜单"，它打开了，但我需要再次点击它来关闭它。

<div class='rmm' data-menu-style = "graphite" data-menu-title = "Menu">
<ul>
    <li><a href="#" onclick="hideshow('main_menu')">Main Menu Show</a></li>
    <li><a href="#" onclick="hideshow('gluten_friendly')">Gluten Friendly</a></li>
    <li><a href="#" onclick="hideshow('kids_menu')">Kids Menu</a></li>
  </ul>
</div>
<div id="main_menu" style="display:none;"><a href="http://xxxxxx"></div>
<div id="gluten_friendly" style="display:none;"><a href="http://xxxxx"></div>
<div id="kids_menu" style="display:none;"><a href="http://xxxxx"></div>

= = = = = Javascript
<script type="text/javascript">
function hideshow(temp){
    var menu = document.getElementById(temp);
    if (menu.style.display=="block")
       menu.style.display="none"
    else
       menu.style.display="block"
    return false;
}
</script>

我已经更新了Sid的代码，它比我所拥有的要好一点，但是当我点击"主菜单"时，它会打开，我仍然需要再次点击它才能关闭，但当我点击"儿童菜单"时，它会在"主菜单"下方打开。

我知道我快成功了，哈哈，哈哈。

这是我公司网站的一部分，所以我真的不想公开发布链接，但如果有人能帮助我，请给我发一封电子邮件，我会把现场链接发给你，这样你就能看到我在处理什么。这将是非常感激的，我很乐意记下这里的帮助论坛。

seansugden@britishbeer.com

以下可能不是最好的解决方案，但对我来说是可行的。

HTML 

<div class='rmm' data-menu-style = "graphite" data-menu-title = "Menu" >
  <ul>
    <li><a href="javascript:hideshow(document.getElementById('main_menu'))">Main Menu Show</a></li>
    <li><a href="javascript:hideshow(document.getElementById('gluten_friendly'))">Gluten Friendly</a></li>
    <li><a href="javascript:hideshow(document.getElementById('kids_menu'))">Kids Menu</a></li>
    <li><a href="javascript:hideshow(document.getElementById('desserts'))">Desserts</a></li>
  </ul>
</div>
<div id="main_menu"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
<div id="gluten_friendly"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
<div id="kids_menu"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
<div id="desserts"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
JavaScript 

function hideshow(temp){
    var menu = temp.id;
    if (menu == "main_menu") {
        document.getElementById('main_menu').style.display="block";
    }
    else
    {
       document.getElementById('main_menu').style.display="none";
    }
    if (menu == "gluten_friendly") {
        document.getElementById('gluten_friendly').style.display="block";
    }
    else
    {
       document.getElementById('gluten_friendly').style.display="none";
    }
    if (menu == "kids_menu") {
        document.getElementById('kids_menu').style.display="block";
    }
    else
    {
       document.getElementById('kids_menu').style.display="none";
    }
    if (menu == "desserts") {
        document.getElementById('desserts').style.display="block";
    }
    else
    {
       document.getElementById('desserts').style.display="none";
    }
}
演示

尝试使用下划线_或破折号-代替id属性的空格。正如Brett在他的评论中所说，带有空格的字符是无效的。

至于隐藏它们，您可以给div s一个公共类

<div class="image" id="main-menu"> ... </div>

和使用document.getElementsByClassName('class-name')检索数组来循环和隐藏(在显示选中的数组之前)。

var divs = document.getElementsByClassName('image');
for(var i in divs){
    div.style.display = 'none';
}

我在我的网站上做了类似的事情。您需要给它们都一个类，并在单击其中一个时执行以下操作:

$('#desserts').click(function(){
    $('.menus').hide();
    $('#desserts').show();
});

当你点击甜品时，首先关闭所有菜单，然后打开甜品。我不完全明白你想要展示和隐藏什么，但我相信你能适应它。

相关文章：