我想在点击链接后显示和隐藏列表。但是，如果我单击一个链接，另一个链接就会显示，反之亦然。我想单独隐藏和显示列表，而不考虑其他列表。代码同下。对此有任何建议，我们将不胜感激。 谢谢。
代码片段:
<head>
<title>menu mockup</title>
<style type="text/css">
.showStd {display: none; }
.hideStd:focus + .showStd {display: inline; }
.hideStd:focus { display: none; }
.hideStd:focus ~ #stdlist { display:none; }
.showCustom {display: none; }
.hideCustom:focus + .showCustom {display: inline; }
.hideCustom:focus { display: none; }
.hideCustom:focus ~ #custom { display:none; }
</style>
</head>
<body>
<p>Here's a list</p>
<div>
<a href="#" class="hideStd">Std</a>
<a href="#" class="showStd">Std</a>
<ol id="stdlist">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
<div>
<a href="#" class="hideCustom">Custom</a>
<a href="#" class="showCustom">Custom</a>
<ol id="custom">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
</body>
最佳答案
最近回答了一个类似的问题。而不是使用 :focus 你可能想使用 :hover。 :active 也有点作用，但不是那么好。所以使用 :hover 除非你打算使用 javascript，否则你可以只使用点击事件。
这是一个简单的例子:
fiddle :http://jsfiddle.net/dHE4S/
HTML
<ul class="navbar">
<li><a href="#">page 1</a></li>
<li><a href="#">page 2</a></li>
<li>title 1
<ul>
<li><a href="#">page 3</a></li>
<li><a href="#">page 4</a></li>
<li><a href="#">page 5</a></li>
</ul>
</li>
<li>title 2
<ul>
<li><a href="#">page 6</a></li>
<li><a href="#">page 7</a></li>
</ul>
</li>
</ul>
CSS
.navbar, .navbar ul
{
font-size:20px;
list-style:none;
z-index:10;
margin:0;
padding:0;
}
.navbar a, .navbar a:link
{
color:black;
text-decoration:none;
}
.navbar li
{
float:left;
background: #666;
width:100px;
}
.navbar li:hover, .navbar a:hover
{
background:#aaa;
color:blue
}
.navbar li ul
{
display:none;
}
.navbar li:hover ul
{
position:absolute;
display:block;
width:100px;
}
关于css - 仅使用 css 隐藏和显示列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20605404/