Показать на клике - CSS, HTML5

Question

У меня есть быстрый вопрос:

У меня есть быстрый стол, в котором есть что-то кликаемое.

<table class ="tablez"> 
    <tr> 
     <th>Table Title </th> 
    </tr> 
    <tr> 
     <td> 
      <a class="clickable">Click Me!</a> 
      <div id="showedClickable"> 
       <p>This is showed when Click Me! is clicked.</p> 
      </div><!--EO showedClickable --> 
     </td> 
    </tr> 
</table> 

То, что я хочу сделать это:

#showedClickable { 
    position:absolute; 
    display:none; 
    width:auto; 
    height:auto; 
} 

Это часть я не знаю, как «фраза» ... Как мне сделать так, чтобы

a.clickable:focus + #showedClickable { 
    display:block; 
} 

Answer 1

Проблема в том, что элемент a без href не получает фокуса по умолчанию. Вот почему ваш код не работает. Вы должны дать ему tabindex, чтобы сделать его фокусируемым.

<a tabindex="0" class="clickable">Click Me!</a> 

jsFiddle Demo

Answer 2

Если вы хотите, чтобы показать div на щелчку a как ваш заголовок указывает, что вы можете сделать это путем изменения кода, как показано ниже:

HTML:

<a href='#showedClickable' class="clickable">Click Me!</a> 

CSS:

#showedClickable:target { 
    display:block; 
} 

Fiddle

РЕДАКТИРОВАТЬ:

:target является псевдо-класс, который соответствует элементу которого id та же, что и идентификатор фрагмента в URI.

URI с идентификаторами фрагментов ссылаются на определенный элемент внутри документа, известный как целевой элемент. В этом случае цель (href анкера) представляет собой элемент с id как showedClickable. Следовательно, при нажатии на якорь содержимое отображается.

Вы можете найти более подробную информацию о :target псевдо-класса here

Примечание: Как bažmegakapa указал в комментариях, этот метод не будет работать в IE 8 и ниже.