javascript - 单击另一个标签时激活标签(:active)

Question

我希望在单击页脚按钮后有一个弹出窗口(具有过渡淡入淡出效果..但我会解决的)

我喜欢的弹出示例:codepen.io/anon/pen/AIFyv

我似乎不知道该怎么做，我已经阅读了此处 (S.O) 和其他地方的示例，它们很有意义，但是当我将它应用到我的代码(html 和 css)时，它不起作用。

我的例子:codepen.io/anon/pen/bVmjxN

也许我的“代码”不好？我是不是写错了，你也可以看看吗？

Answer 1

您的代码还不错，您只是没有为事件触发器绑定(bind)必要的 JS，或者没有制作必要的 CSS 类来帮助转换。

您可以执行以上所有操作，使转换变得非常简单但很酷!这是我更改的代码，演示在底部。

HTML:

<div id="heading1">
   <h1 id="header" class="text hide">
    CSS is cool!
    </h1>
</div>

CSS:

.text{
  transition: all 1s ease-in;
}

.hide{
   opacity: 0;
}

我使用 transition: all 作为演示，您可以根据需要自定义它。要创建淡入淡出效果，请使用 transition: opacity。

JS:

$('.footer-links').on("click", function(){
  $('.text').toggleClass('bubble hide'); 
});

CODEPEN DEMO