скрыть и показать список только css

Я хочу показать и скрыть список после нажатия на ссылку. Но если я нажму на одну ссылку на другой дисплей и наоборот. Я хочу скрыть и показать список отдельно, независимо от другого. Код для того же, что и ниже. Любое предложение относительно этого будет оценено по достоинству. Спасибо.скрыть и показать список только css

фрагмент кода:

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

источник

2013-12-16 user1104331

Ответил подобный вопрос недавно. Вместо использования: focus вы, вероятно, захотите использовать: hover. : активный и вид работ, но не так. Поэтому используйте: hover, если вы не собираетесь использовать javascript, тогда вы можете просто использовать событие click.

Вот простой пример:

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

источник

2013-12-16 07:30:44 Andrew

скрыть и показать список только css

ответ

Смежные вопросы