Применить новые правила CSS при нажатии <a> элемент

Question

В настоящее время я пытаюсь разработать и развить свою собственную легкую лайтбокс. Идея заключается в том, что кто-то нажимает <a href="#tab1">, он изменит свойства <div id="tab1"> от display: none до display: block. Как только лайтбокс появится, у него будет другая ссылка, например <a href="#tab1_close">, чтобы отменить свойства CSS обратно до display: none.

Я использовал input[name='name'] ~ #id для многих других разделов на моем сайте, мне интересно, можно ли изменить его, чтобы вход распознал <a> в качестве входных данных и применяет изменения CSS на клике.

В идеале я мог бы добавить id="tab_1" в <a>, тогда код будет примерно a#tab_1:active ~ #tab1 { display: block }, но этот код ничего не делает.

Here's my Code Pen

Answer 1

Если вы хотите CSS только попробуйте селектор :target:

#tab1:target { 
    display: block; 
} 

http://codepen.io/anon/pen/okEqr

Answer 2

toggleClass JQuery() приведет доу шляпу вы хотите: https://api.jquery.com/toggleClass/