Question

我想在点击链接后显示和隐藏列表。但是，如果我点击一个链接，另一个显示，反之亦然。我想隐藏并单独显示列表而不管其他。代码与下面相同。任何有关这方面的建议将不胜感激。谢谢。

代码段：

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

Answer 1

最近回答了类似的问题。您可能希望使用：hover，而不是使用：focus。：活跃也有点作品，但不是很好。所以使用：hover除非您要使用javascript，否则您只需使用点击事件。

这是一个简单的例子：

小提琴：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隐藏和显示列表

1 个答案: