html - 标签式导航不显示内容

Question

谁能帮帮我，我束手无策。我创建了一个 CSS3 选项卡式导航设置。单击该选项卡时，它应该显示基本内容——此时它只有一行。我错过了一些东西，我只是看不到它。我不打算实现 JS 或 Jquery，这应该可行，但事实并非如此。

代码如下:

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

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

Answer 1

这只是你最后一个CSS选择器

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

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