仅使用css隐藏和显示列表_Css

仅使用css隐藏和显示列表

css

仅使用css隐藏和显示列表,css,Css,我想在点击链接后显示和隐藏列表。但如果我点击一个链接，另一个显示，反之亦然。我想单独隐藏和显示列表，而不考虑其他。代码如下所示。如果您对此有任何建议，我们将不胜感激。谢谢代码段： <head> <title>menu mockup</title> <style type="text/css"> .showStd {display: none; } .hideStd:focus + .showStd {disp

我想在点击链接后显示和隐藏列表。但如果我点击一个链接，另一个显示，反之亦然。我想单独隐藏和显示列表，而不考虑其他。代码如下所示。如果您对此有任何建议，我们将不胜感激。谢谢

代码段：

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


菜单模型
.showStd{display:none；}
.hideStd:focus+.showStd{display:inline；}
.hideStd:focus{display:none；}
.hideStd:focus~#stdlist{display:none；}
.showCustom{显示：无；}
.hideCustom:focus+.showCustom{display:inline；}
.hideCustom:focus{display:none；}
.hideCustom:focus~#custom{display:none；}
这是一张单子
项目1
项目2
项目3
项目1
项目2
项目3

最近回答了一个类似的问题。而不是使用：focus，您可能希望使用：hover.：活跃的作品也是一种，但不尽然。所以使用：悬停，除非您要使用javascript，否则您可以只使用单击事件

下面是一个简单的例子：

小提琴：

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>

.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;
}