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中检查了哪个元素。

我认为你假设要分组的元素，但事实并非如此。创建按钮组（表单）以解决此问题。

多个选项卡相互冲突

2 个答案: