Question

有人可以帮助我吗？我的智慧结束了。我创建了一个CSS3选项卡式导航设置。单击选项卡时，它应显示基本内容 - 此时它只有一行。我错过了一些东西而我却无法看到它。我不打算实现JS或Jquery，这应该可行，但事实并非如此。

这里是代码：

＆＃13;

.tabs
{
  position: relative;
  display: block;
  height: 40px;
  width: 600px;
  margin: 75px auto;
  list-style: none;
  float: none;
}

.tabs input[type="radio"]
{
  display: none;
}

.tabs label
{
  float: left;
  display: block;
  position: relative;
  height: 40px;
  width: 160px;
  display:block;
  padding: 10px 20px;
  font-weight: normal;
  font-family: 'Lucida Sans';
  font-size: 17px;
  background: #f2f2f2;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  color: #bfbfbf;
  box-shadow: 0.5px -2px 2px rgba(0,0,0,0.1), 0.5px -1px 2px rgba(0,0,0,0.1);
  transition: all 0.1s ease-in-out;
  top: 2px;
}

.tabs label:hover
{
  background: rgba(255,255,255,0.5);
  top:0;
}

.tab-content
{
  position: absolute;
  top: 100px;
  left: 0;
  display: none;
}

[id^=tab]:checked+label
{
  background: rgba(255,255,255,0.5);
  top:0;
}

[id^=tab]:checked~[id^=tab-content]
{
  display: block;
}

＆＃13;

<ul class="tabs">
	<li>
		<input type="radio" name="tab" id="tab1" checked />
		<label for="tab1">Personal Information</label>
		<div class="tab-content" id="tab1-content">Here is the content for tab 1</div>
	</li>
	
	
	<li>
		<input type="radio" name="tab" id="tab2" />
		<label for="tab2">Academic Information</label>
		<div class="tab-content" id="tab2-content">Here is the content for tab 2</div>
	</li>
	
	
	
	<li>
		<input type="radio" name="tab" id="tab3" />
		<label for="tab3">OECTA Involvement</label>
		<div class="tab-content" id="tab3-content">Here is the content for tab 3</div>
	</li>	
</ul>

＆＃13;

Answer 1

它只是你最后一个css选择器

[id^=tab]:checked~.tab-content{
    display: block;
}

[id ^ = tab-content]选择属性ID以 tab-content 开头的所有元素，这不是您想要的。

选项卡式导航未显示内容

1 个答案: