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>

最初にページを開いたときにリストを非表示にしたい。現在、デフォルトの状態はリストを表示することです。このコードは次の Web サイトから取得しました: http://dev.opera.com/articles/view/css3-show-and-hide/

記事のコメントの1つで提案されていることを逆にして、リストを非表示にしようとしましたが、うまくいきません。そのコードは次のとおりです。

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