Html 使用子菜单时内容消失（菜单和子菜单争夺目标）

我想创建一个包含多个图片库的网站。左侧有一个菜单，您可以从不同的库中进行选择。单击某个菜单项后，右侧该菜单项旁边会出现一个图库。每个图库都会显示一个较大的图像，下面有较小的缩略图。单击缩略图会更改其上方的大图像

我遇到的问题是，左侧的两个菜单（图库选择器）&缩略图/大图像都使用相同的隐藏和显示内容的方法。我通过在css类中使用display:block和display:none来实现这一目标

正如你可能猜到的，因为他们都占据了这个目标，所以事情并没有按预期的那样进行。单击缩略图时，会导致较大的菜单目标发生更改，从而消失。下面是说明该问题的代码

在这样的菜单中创建菜单的最佳方式是什么？有没有一种方法可以同时针对两个不同的ID？因此，请确保在选择缩略图时，菜单的“显示：无”不会生效

我正试图用HTML和CSS创建这个系统，所以如果可能的话，我更愿意不使用javascript。我已经绞尽脑汁好几个小时了，所以现在我只想让它工作。如果这意味着要在我的网站上添加JS，我当然愿意接受任何解决方案。非常感谢您的回复

HTML:

---

经过更多的挖掘和实验，我终于想出了解决这个问题的办法。它使用的是Javascript，所以如果你有一个纯CSS解决方案，我仍然对它持开放态度

我仍在制定格式，但现在的功能正是我想要它做的。如果其他人有类似问题，请查看以下内容：

我还提出了一个稍微复杂一点的版本，在外部菜单中包含子菜单，因为这是我网站的最终目标。它需要一些巧妙的嵌套来保持所有信息的准确性，但它在技术上能够使用这种方法：

下面是常规菜单的代码。 HTML:

Javascript:

$('#toggle > span').click(function() {
    var ix = $(this).index();

    $('#left').toggle( ix === 0 );
    $('#right').toggle( ix === 1 );
    $('#far').toggle( ix === 2 );
});

希望这对其他人有帮助

.main {
    background: #222224;
    color: #FFF;
    position: relative;
    height:300px;
    width:80%;
    padding:0px;
    float:right;
    overflow:auto;
    }
.nav {
    position: relative;
    height:300px;
    width:20%;
    float:left;
    padding:0px;
    background: #a2bbc6;
    }

.tab-content{
    display: none;
    }

.tab-content:target {
    display: block;
    }


.image-gallery{
    width: 400px;
    padding:25px;
    border:solid 0px #c5c5c5;
    }

.image-gallery .big-image{
  width:100px;
  height:50px;
}

.image-gallery .big-image img{
  display:none;
  margin:0 auto;
}

.image-gallery .big-image img:target {
    display:block;
    }

.image-gallery ul{
    margin-top:14px;
    list-style-type: none;
    }

.image-gallery li{
    margin-bottom: 6px;
    opacity: 0.4;
    }

.image-gallery li:hover{
    opacity: 1;
    }

<div class="nav"><p id="toggle">
    <span style="color:blue">Menu 1</span>
    <span style="color:green"> Menu 2 </span>
    <span> Menu 3 (blank) </span>
</p></div>   

<div id="left">
    <div class="main">
        <center><h3>This is Menu 1</h3></center>
        <div class="image-gallery">
            <div class="big-image">
                <img id="Red" src="http://www.venus.com/productimages/dept_swatches/crimson_sm.jpg" width="100"    height="50" />           
                <img id="Yellow" src="http://www.msubillings.edu/urelations/img/blockgold.gif" width="100" height="50" />   
            </div>  
        </div>

        <div class="image-gallery">
            <ul>
            <li><a href="#Red"><img src="http://i.imgur.com/8KZSfT5.gif" width="64" height="64" /></a></li>
            <li><a href="#Yellow"><img src="http://i.imgur.com/pV56FNe.png" width="64" height="64" /></a></li>
            </ul>
        </div>

    </div>  
</div>
<div id="right"> 
    <div class="main">
        <center><h3>Menu 2! Menu 2!</h3></center>
    </div>  
</div>
<div id="far"> There's nothing here yet </div>

#right { display:none; }
#far { display:none; }

.main {
    background: #222224;
    color: #FFF;
    position: relative;
    height:300px;
    width:80%;
    padding:0px;
    float:right;
    overflow:auto;
    }
.nav {
    position: relative;
    height:300px;
    width:20%;
    float:left;
    padding:0px;
    background: #a2bbc6;
    }

.tab-content{
    display: none;
    }

.tab-content:target {
    display: block;
    }


.image-gallery{
    width: 400px;
    padding:25px;
    border:solid 0px #c5c5c5;
    }

.image-gallery .big-image{
  width:100px;
  height:50px;
}

.image-gallery .big-image img{
  display:none;
  margin:0 auto;
}

.image-gallery .big-image img:target {
    display:block;
    }

.image-gallery ul{
    margin-top:14px;
    list-style-type: none;
    }

.image-gallery li{
    margin-bottom: 6px;
    opacity: 0.4;
    }

.image-gallery li:hover{
    opacity: 1;
    }

$('#toggle > span').click(function() {
    var ix = $(this).index();

    $('#left').toggle( ix === 0 );
    $('#right').toggle( ix === 1 );
    $('#far').toggle( ix === 2 );
});