代码之家 › 专栏 › 技术社区 › Maanstraat

多个选项卡相互冲突

tabs css

Maanstraat · 技术社区 · 7 年前

我已经做了一个标签导航,只有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>

2 回复 | 直到 7 年前

Pete Irfan TahirKheli 7 年前

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

.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>

David Zwart 7 年前

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

我认为您假设元素被分组,但事实并非如此。创建按钮组(表单)以解决此问题。