我正在学习如何使用选项卡和通过选择选项卡打开内容。到目前为止它工作正常但是当我尝试通过单击选项卡来显示表单(例如输入框、按钮等)时，它不显示任何内容。我哪里做错了？
HTML 部分
<html>
<head>
<link rel="stylesheet" href="css/menu.css">
</head>
<h1>Responsive CSS Tabs</h1>
<main>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Home</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Project</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">About us</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Contact</label>
<section id="content1">
<p>
This is the Home Tab
</p>
</section>
<section id="content2">
<html>
<form>
<label for="Project Name">Project Name</label>
<br/>
<input type="text" id="ProjectName">
<br/>
<label for="Project Manager">Project Manager</label>
<br/>
<input type="text" id="ProjectManager">
<br/>
<input type="text" id="Start Date">
</form>
</html>
</section>
<section id="content3">
<p>
This is the about us page.
</p>
</section>
<section id="content4">
<p>
This is the Contact Us section.
</p>
</section>
</main>
</html>
CSS 代码
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css');
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: #555;
background: #eee;
}
h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}
p {
margin: 0 0 20px;
line-height: 1.5;
}
main {
min-width: 320px;
max-width: 800px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
#content2 input {
display: block;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}
label[for*='1']:before { content: '\f1cb'; }
label[for*='2']:before { content: '\f17d'; }
label[for*='3']:before { content: '\f16b'; }
label[for*='4']:before { content: '\f1a9'; }
label:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid orange;
border-bottom: 1px solid #fff;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
@media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}
@media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
最佳答案
问题是你设置的
input{ display:none; }
所以没有任何输入显示...如果您只希望单选按钮不会出现，您最好使用
input[type="radio"] { display: none; }
或者您只是向不想显示的单选按钮添加一个类。
这是一个例子:
http://codepen.io/tobiasglaus/pen/GjYvRy
您会看到，如果切换到“元素”选项卡，则会显示文本字段...
关于html - 通过选择 HTML 和 CSS 中的选项卡显示表单时出现问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40107477/