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

Question

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

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

正如您可能猜到的那样，由于他们都在抢占该目标，所以事情并没有按预期进行。当您单击缩略图时，它会导致较大的菜单目标发生变化，因此它会消失。这是说明问题的代码。

JSFiddle (with the gallery inside the menu)

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

在这样的菜单中创建菜单的最佳方法是什么？有没有办法可以同时定位 2 个不同的 ID？ (因此确保 display:none 在选择缩略图时不会对菜单生效)

我正在尝试仅使用 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 );
});

希望这对其他人有帮助!