多个Tabs冲突

Question

我做了一个标签导航，只有CSS，它是工作的！但是，如果一个页面中有多个选项卡容器，那么选项卡导航就会相互冲突。

下面我已经包含了我使用的所有代码，我希望有人知道我的问题的解决方案。

​

.tabs-container input {
	display : none;
}

.tabs-container label {
	display : inline-block;
	border : 1px solid transparent;
	margin : 0 0 -1px;
	padding : 5px 15px;
	font-size : 17px;
	font-weight : 600;
	text-align : center;
}

.tabs-container label:hover {
	color : #0094cc;
	cursor : pointer;
}

.tabs-container input:checked + label {
	border : 1px solid #e0dede;
	border-top : 2px solid #0094cc;
	border-bottom : 1px solid #FFFFFF;
	color : #4f4d4d;
}

.tabs-container .content {
	display: none;
	border-top : 1px solid #e0dede;
	border-bottom : 1px solid #e0dede;
}

.tabs-container#tabs1 input#tabs1-01:checked ~ #tabs1-01,
.tabs-container#tabs1 input#tabs1-02:checked ~ #tabs1-02,
.tabs-container#tabs2 input#tabs2-01:checked ~ #tabs2-01,
.tabs-container#tabs2 input#tabs2-02:checked ~ #tabs2-02{
  display: block;
}

<div class="tabs-container" id="tabs1">
  <input checked="" id="tabs1-01" type="radio" name="tabs">
  <label for="tabs1-01">Hier een tab</label>
  <input id="tabs1-02" type="radio" name="tabs">
  <label for="tabs1-02">Nog een tab</label>

  <div class="content" id="tabs1-01"><p>Tab 01</p></div>
  <div class="content" id="tabs1-02"><p>Tab 02</p></div>

</div>

<div class="tabs-container" id="tabs2">

  <input checked="" id="tabs2-01" type="radio" name="tabs">
  <label for="tabs2-01">Hier een tab</label>
  <input id="tabs2-02" type="radio" name="tabs">
  <label for="tabs2-02">Nog een tab</label>

  <div class="content" id="tabs2-01"><p>Tab 01</p></div>
  <div class="content" id="tabs2-02"><p>Tab 02</p></div>

</div>

​

Answer 1

您应该只为第二组选项卡指定一个不同的名称(同名的收音机只能检查一项)。

​

.tabs-container input {
	display : none;
}

.tabs-container label {
	display : inline-block;
	border : 1px solid transparent;
	margin : 0 0 -1px;
	padding : 5px 15px;
	font-size : 17px;
	font-weight : 600;
	text-align : center;
}

.tabs-container label:hover {
	color : #0094cc;
	cursor : pointer;
}

.tabs-container input:checked + label {
	border : 1px solid #e0dede;
	border-top : 2px solid #0094cc;
	border-bottom : 1px solid #FFFFFF;
	color : #4f4d4d;
}

.tabs-container .content {
	display: none;
	border-top : 1px solid #e0dede;
	border-bottom : 1px solid #e0dede;
}

.tabs-container#tabs1 input#tabs1-01:checked ~ #tabs1-01,
.tabs-container#tabs1 input#tabs1-02:checked ~ #tabs1-02,
.tabs-container#tabs2 input#tabs2-01:checked ~ #tabs2-01,
.tabs-container#tabs2 input#tabs2-02:checked ~ #tabs2-02{
  display: block;
}

<div class="tabs-container" id="tabs1">
  <input checked="" id="tabs1-01" type="radio" name="tabs">
  <label for="tabs1-01">Hier een tab</label>
  <input id="tabs1-02" type="radio" name="tabs">
  <label for="tabs1-02">Nog een tab</label>

  <div class="content" id="tabs1-01"><p>Tab 01</p></div>
  <div class="content" id="tabs1-02"><p>Tab 02</p></div>

</div>

<div class="tabs-container" id="tabs2">

  <input checked="" id="tabs2-01" type="radio" name="tabs2">
  <label for="tabs2-01">Hier een tab</label>
  <input id="tabs2-02" type="radio" name="tabs2">
  <label for="tabs2-02">Nog een tab</label>

  <div class="content" id="tabs2-01"><p>Tab 01</p></div>
  <div class="content" id="tabs2-02"><p>Tab 02</p></div>

</div>

​

Answer 2

检查DOM中选中了哪个元素。

我认为你是在假设要分组的元素，但事实并非如此。创建按钮组(窗体)以解决此问题。