Question

如何制作此标签脚本：FIDDLE的工作方式如下：DEMO

我想在彼此之间切换社交标签，但它不起作用。

我在哪里弄错了？

a[name="tab1"] + .facebook_box {
    display: block
}
:target + .twitter_box {
    display: block
}
:target ~ a[name="tab1"] + .facebook_box {
    display: none
}

Answer 1

**更新：这是this question **

的副本

以下是使其有效的更改：

首先是一个小错误：关闭这样的锚标记：</a>不像这个<a/>。
然后更改文章的顺序：

<div class="tab-content"> <a name="tab2"></a> <article class="twitter_box">t</article> <a name="tab1"></a> <article class="facebook_box">f</article> </div>

然后在“.facebook_box”之前删除“.social_slider .tab-content”，或者将其添加到执行魔术的行中，否则你会用更精确的类定义来覆盖魔法。然后你需要增加标签内链接的大小，否则你只需点击标签，而不是锚点。

.facebook_box {
    border-radius: 8px;
    background-color: #fff;
    position: relative;
    z-index: 99998;
    display:none;
    height:300px;
    border:10px solid #3a93d6;
}
.twitter_box {
    border-radius: 8px;
    background-color: #19bfe5;
    position: relative;
    z-index: 99998;
    display:none;
    height:300px;
    border: 10px solid #68c2ff;
}

.twitter_icon > a, .facebook_icon > a{
    display: block;
    height: 100%;
    width: 100%;
}

纯CSS标签切换

1 个答案: