0

我希望有人可以提供帮助。当链接“隐藏”和“显示”出现在屏幕上时，我已经尝试了几天来隐藏和显示简单的列表。我在网上找到了以下内容：

<!DOCTYPE html>
<head>
<title>menu mockup</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
 .show {display: none; }
 .hide:focus + .show {display: inline; } /*this is the switch*/
 .hide:focus { display: none; } /*this is the switch*/
 .hide:focus ~ #list { display:none; }*/
</style>
</head>

<body>
<p>Here's a list</p>
  <div>

     <a href="#" class="hide" tabindex="1">[hide]</a>      
     <a href="#" class="show" tabindex="2">[show]</a>
     <ol id="list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>

     </ol>
  </div>
</body>
</html>

我希望在您第一次打开页面时隐藏列表。现在默认状态是列表显示。我从以下网站获得此代码：http ://dev.opera.com/articles/view/css3-show-and-hide/

我尝试了文章中的一条评论中的建议，以扭转显示隐藏列表的过程，但它不起作用。这是代码：

<!DOCTYPE html>
<head>
<title>menu mockup</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.hide {display: none; }
.show:focus + .hide {display: inline; }
.show:focus { display: none; }
.show:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }
</style>
</head>
<body>
<p>Here's a list</p>
<div>

<a href="#" class="show">[hide]</a>
<a href="#" class="hide">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
<p>How about that?</p>
</body>
</html>

如果有人可以对此提供简单的解决方法，我将不胜感激。

谢谢！

4

2 回答 2

1

试试下面的代码，我改变了css以及锚标签的位置

<!DOCTYPE html>
<head>
<title>menu mockup</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
 .hide {display: none; }
 #list {display: none; }
 .show:focus { display: none; }
 .show:focus + .hide {display: inline; }
 .show:focus ~#list{ display:block; }


</style>
</head>

<body>
<p>Here's a list</p>
  <div>

     <a href="#" class="show" tabindex="2">[show]</a>
     <a href="#" class="hide" tabindex="1">[hide]</a>      
     <ol id="list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
     </ol>
  </div>
</body>
</html>
于 2013-06-10T17:25:53.267 回答
0

只需自行设置#list为display:none在线即可。这将使默认状态隐藏。

于 2013-06-10T17:03:36.977 回答