Tab系统使用纯CSS，锚避免了传播到标签 [英] Tab system with pure CSS, anchor avoids the propagation to label

问题描述

我只使用CSS使用：target 和：checked 伪字符串制作标签系统，在标签内的锚点，并且标签不会触发：checked 。

锚点，：checked 不会触发，因为点击位于< a> 标记中， a < label> 必须触发单选按钮。如果你点击选项卡的边框，你会看到它如何触发：checked ，但不是锚点，所以：target 不能被触发。

这里是我的代码，比下面更容易理解：

  a {text-decoration：none;} tabs {position：relative;} input {display：none;}。 label {text-decoration：none; border：1px solid black; padding：2px; display：inline-block; top：2px;位置：相对; cursor：pointer;}。tabs .tab input：checked + label {background-color：white; border-bottom：0; padding：4px 2px; top：1px;}。contents {border：1px solid black; background-color：white;}。contents .content {display：none; padding：20px;}。contents .content：target {display：block;}  

 < div class =tabs> < span class =tab> < input type =radioname =chid =check1> < label for =check1> < a href =＃tab1>标签1< / a> < / label> < / span> < span class =tab> < input type =radioname =chid =check2> < label for =check2> < a href =＃tab2>标签2< / a> < / label> < / span> < span class =tab> < input type =radioname =chid =check3> < label for =check3> < a href =＃tab3>标签3< / a> < / label> < / span>< / div>< div class =content> < div class =contentid =tab1> Contenido 1< / div> < div class =contentid =tab2>< strong> Contenido 2< / strong>< / div> < div class =contentid =tab3>< em> Contenido 3< / em>< / div>< / div>   

有没有办法结合：checked 和

谢谢。

EDIT

这里是您没有锚点的代码段。显然不会触发：target ：

  a {text-decoration：none;}。tabs {position：relative;} input {display：none;}。 border：1px solid black; padding：2px; display：inline-block; top：2px;位置：相对; cursor：pointer;}。tabs .tab input：checked + label {background-color：white; border-bottom：0; padding：4px 2px; top：1px;}。contents {border：1px solid black; background-color：white;}。contents .content {display：none; padding：20px;}。contents .content：target {display：block;}  

 < div class =tabs> < span class =tab> < input type =radioname =chid =check1> < label for =check1>标签1< / label> < / span> < span class =tab> < input type =radioname =chid =check2> < label for =check2>标签2< / label> < / span> < span class =tab> < input type =radioname =chid =check3> < label for =check3>标签3< / label> < / span>< / div>< div class =content> < div class =contentid =tab1> Contenido 1< / div> < div class =contentid =tab2>< strong> Contenido 2< / strong>< / div> < div class =contentid =tab3>< em> Contenido 3< / em>< / div>< / div>   

当您使用输入：checked

解决方案

您需要将您的

code>输入 前进，以便您可以使用选择器〜选择任何sibblings及其在文档流程中的以下子元素：

示例

  a {text-decoration：none;}。tabs {position：relative;} input {display：none;}。 border：1px solid black; padding：2px; display：inline-block; top：2px;位置：相对; cursor：pointer;}＃check1：checked〜.tabs label [for =check1]，＃check2：checked〜.tabs label [for =check2]，＃check3：checked〜.tabs label [for = ] {background-color：white; border-bottom：0; padding：4px 2px; top：1px;}。contents {border：1px solid black; background-color：white;}。contents .content {display：none; padding：20px;}＃check1：checked〜.contents＃tab1，＃check2：checked〜.contents＃tab2，＃check3：checked〜.contents＃tab3 {display：block;}  

 <！ - 为CSS选项卡开始隐藏输入目的 - >< input type = radioname =chid =check1>< input type =radioname =chid =check2>< input type =radioname =chid = check3><！ - 结束CSS标签目的的隐藏输入 - >< div class =tabs> < span class =tab> < label for =check1>标签1< / label> < / span> < span class =tab> < label for =check2>标签2< / label> < / span> < span class =tab> < label for =check3>标签3< / label> < / span>< / div>< div class =content> < div class =contentid =tab1> Contenido 1< / div> < div class =contentid =tab2>< strong> Contenido 2< / strong> < / div> < div class =contentid =tab3>< em> Contenido 3< / em> < / div>< / div>  

I'm making a tab system only with CSS using :target and :checked pseudoclasses, but I have an anchor inside the label, and the label doesn't trigger the :checked.

If you click in the anchor, the :checked doesn't trigger because the click is in the <a> tag, but is inside a <label> that must trigger the radio button. If you click on the border of the tab, you'll see how it triggers the :checked, but not the anchor, so the :target can't be triggered.

Here you are my code, more understandable than the words:

a {
  text-decoration: none;
}
.tabs {
  position: relative;
}
input {
  display: none;
}
.tabs .tab label {
  text-decoration: none;
  border: 1px solid black;
  padding: 2px;
  display: inline-block;
  top: 2px;
  position: relative;
  cursor: pointer;
}
.tabs .tab input:checked + label {
  background-color: white;
  border-bottom: 0;
  padding: 4px 2px;
  top: 1px;
}
.contents {
  border: 1px solid black;
  background-color: white;
}
.contents .content {
  display: none;
  padding: 20px;
}
.contents .content:target {
  display: block;
}

<div class="tabs">
  <span class="tab">
    <input type="radio" name="ch" id="check1">
    <label for="check1">
      <a href="#tab1">Tab 1</a>
    </label>
  </span>
  <span class="tab">
    <input type="radio" name="ch" id="check2">
    <label for="check2">
      <a href="#tab2">Tab 2</a>
    </label>
  </span>
  <span class="tab">
    <input type="radio" name="ch" id="check3">
    <label for="check3">
      <a href="#tab3">Tab 3</a>
    </label>
  </span>
</div>
<div class="contents">
  <div class="content" id="tab1">Contenido 1</div>
  <div class="content" id="tab2"><strong>Contenido 2</strong></div>
  <div class="content" id="tab3"><em>Contenido 3</em></div>
</div>

Is there a way to combine :checked and :target pseudoclasses to achieve a complete tab system only with CSS?

Thank you.

EDIT

Here you are the snippet without anchor. Obviously the :target will not be triggered:

a {
  text-decoration: none;
}
.tabs {
  position: relative;
}
input {
  display: none;
}
.tabs .tab label {
  text-decoration: none;
  border: 1px solid black;
  padding: 2px;
  display: inline-block;
  top: 2px;
  position: relative;
  cursor: pointer;
}
.tabs .tab input:checked + label {
  background-color: white;
  border-bottom: 0;
  padding: 4px 2px;
  top: 1px;
}
.contents {
  border: 1px solid black;
  background-color: white;
}
.contents .content {
  display: none;
  padding: 20px;
}
.contents .content:target {
  display: block;
}

<div class="tabs">
  <span class="tab">
    <input type="radio" name="ch" id="check1">
    <label for="check1">
      Tab 1
    </label>
  </span>
  <span class="tab">
    <input type="radio" name="ch" id="check2">
    <label for="check2">
      Tab 2
    </label>
  </span>
  <span class="tab">
    <input type="radio" name="ch" id="check3">
    <label for="check3">
      Tab 3
    </label>
  </span>
</div>
<div class="contents">
  <div class="content" id="tab1">Contenido 1</div>
  <div class="content" id="tab2"><strong>Contenido 2</strong></div>
  <div class="content" id="tab3"><em>Contenido 3</em></div>
</div>

解决方案

When you use input:checked, :target is not efficient cause this event is not triggered at all.

You need to put your input ahead in the flow so you can use the selector ~ to select any sibblings and their children following in the flow of the document:

example

a {
  text-decoration: none;
}
.tabs {
  position: relative;
}
input {
  display: none;
}
.tabs .tab label {
  text-decoration: none;
  border: 1px solid black;
  padding: 2px;
  display: inline-block;
  top: 2px;
  position: relative;
  cursor: pointer;
}
#check1:checked ~ .tabs label[for="check1"],
#check2:checked ~ .tabs label[for="check2"],
#check3:checked ~ .tabs label[for="check3"] {
  background-color: white;
  border-bottom: 0;
  padding: 4px 2px;
  top: 1px;
}
.contents {
  border: 1px solid black;
  background-color: white;
}
.contents .content {
  display: none;
  padding: 20px;
}
#check1:checked ~ .contents #tab1,
#check2:checked ~ .contents #tab2,
#check3:checked ~ .contents #tab3 {
  display: block;
}

<!-- begin hidden inputs for CSS tabs purpose -->
<input type="radio" name="ch" id="check1">
<input type="radio" name="ch" id="check2">
<input type="radio" name="ch" id="check3">
<!-- End hidden inputs for CSS tabs purpose -->
<div class="tabs">
  <span class="tab">
    <label for="check1">
      Tab 1
    </label>
  </span>
  <span class="tab">
    <label for="check2">
      Tab 2
    </label>
  </span>
  <span class="tab">
    <label for="check3">
      Tab 3
    </label>
  </span>
</div>
<div class="contents">
  <div class="content" id="tab1">Contenido 1</div>
  <div class="content" id="tab2"><strong>Contenido 2</strong>
  </div>
  <div class="content" id="tab3"><em>Contenido 3</em>
  </div>
</div>

这篇关于Tab系统使用纯CSS，锚避免了传播到标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！