使用子菜单时内容消失(菜单和子菜单争夺目标)

Question

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

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

正如您可能猜到的那样，因为它们都霸占了这个目标，所以事情并不像预期的那样工作。单击缩略图时，会导致较大的菜单目标发生变化，从而使其消失。以下是用于说明此问题的代码。

JSFiddle (with the gallery inside the menu)

Another JSFiddle (separated to show them working independent of each other)

在这样的菜单中创建菜单的最佳方式是什么？有没有办法让两个不同的Is同时成为目标？(从而确保在选择缩略图时，菜单中的显示:无不会生效)

我正在尝试创建这个只有HTML和CSS的系统，所以如果可能的话，我更喜欢在没有javascript的情况下工作。我已经绞尽脑汁好几个小时了，所以在这一点上，我只希望它能工作。如果这意味着将JS添加到我的站点，我当然对任何解决方案都持开放态度。非常感谢您的回复！

HTML：

<div class="nav">
    <a href="#Menu1"><h3>Menu Item 1</h3></a>
    <a href="#Menu2"><h3>Menu Item 2</h3></a>
</div>   


<div class="tab-content" id="Menu1">
    <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 class="tab-content" id="Menu2">
    <div class="main">
        <center><h3>Menu 2! Menu 2!</h3></center>
    </div>
</div>

CSS：

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

Answer 1

经过进一步的挖掘和实验，我终于想出了一个解决方案。它使用的是Javascript (所以如果你有一个纯CSS解决方案，我仍然是开放的)。

我还在研究格式化，但功能现在完全符合我的要求。如果其他人有类似的问题，请查看以下内容：

JSFiddle (Working Menus)

我还想出了一个稍微更复杂的版本，在外部菜单中有子菜单(因为这是我在这个网站上的最终目标)。它将需要一些巧妙的嵌套来保持所有信息的整洁，但它在技术上是可以使用这种方法的：

JSFiddle (With sub-menus)

下面常规菜单的代码。HTML：

<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>

CSS：

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

Javascript：

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

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

希望这对其他人有所帮助！