Блог

Главная - Вопросы по программированию - Проблемы с отображением формы при выборе вкладки в HTML и CSS?

Проблемы с отображением формы при выборе вкладки в HTML и CSS?

#html #css

#HTML #css

Вопрос:

Я учусь использовать вкладки и открывать содержимое, выбирая вкладку. Пока все работает нормально, Но когда я пытаюсь отобразить форму (например, поле ввода, кнопки и т. Д.), щелкнув вкладку, Она ничего не отображает. Что я делаю не так?

Раздел 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;
  }
}

Ответ №1:

Проблема в том, что вы устанавливаете 

 input{ display:none; }

Таким образом, ни один из входных данных не отображается… Если вы хотите, чтобы переключатели не отображались, вам лучше использовать

 input[type="radio"] { display: none; }

или вы просто добавляете класс к переключателям, которые вы не хотите отображать.

Вот пример:

http://codepen.io/tobiasglaus/pen/GjYvRy

Вы видите, что при переключении на вкладку Проекта отображаются текстовые поля…