Question

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

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

正如你可能猜到的那样，因为它们都在瞄准那个目标，事情并没有按预期发挥作用。单击缩略图时，会导致较大的菜单目标发生更改，从而消失。以下是用于说明问题的代码。

JSFiddle (with the gallery inside the menu)

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

在这样的菜单中创建菜单的最佳方法是什么？有没有办法同时针对两种不同的ID？（从而确保显示：在选择缩略图时，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 );
});

希望这可以帮助其他人！

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

1 个答案: