单击<a>元素</a>时应用新的CSS规则

Question

I'm currently trying to design and develop my own lightweight lightbox. The idea is when someone clicks <a href="#tab1"> it will change the properties of the <div id="tab1"> from display: none to display: block . Once the lightbox pops up it will have another link like <a href="#tab1_close"> to reverse the CSS properties back to display: none .

I've used input[name='name'] ~ #id for a lot of other sections on my site, I'm wondering if it's possible to change it so the input recognizes the <a> as the input and applies the CSS changes on the click.

Ideally, I could add id="tab_1" to the <a> , then the code would be something like a#tab_1:active ~ #tab1 { display: block } but that code doesn't seem to do anything.

Answer 1

If you want CSS only try the :target selector:

#tab1:target {
  display: block;
}

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

Answer 2

jQuery的toggleClass（）将添加您想要的帽子： https : //api.jquery.com/toggleClass/