javascript - 单击元素时应用新的 CSS 规则

Question

我目前正在尝试设计和开发自己的轻量级灯箱。这个想法是当有人点击<a href="#tab1">它时，它会改变<div id="tab1">fromdisplay: 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 }但该代码似乎没有做任何事情。

这是我的代码笔

Answer 1

如果你想要 CSS 只尝试:target选择器：

#tab1:target {
  display: block;
}

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

Answer 2

jQuery 的 toggleClass() 会满足你的需要：https ://api.jquery.com/toggleClass/