如何切換不同的div

當前成果 我的每一個標籤都僅控制第一個框，而不是控制它們駐留在箱子裏。如何切換不同的div

期望的結果 使每個按鈕只觸發內容而不是控制第一個div中的內容。

我也不想有一堆不同的ID，所以有一個更簡單的方法來做到這一點與JavaScript？

問題所以我怎麼做的第一個按鈕僅控制盒是在和第二個按鈕只能控制盒它是嗎？

body { 
 
    background: #CCC; 
 
    font-family: 'Varela Round', sans-serif; 
 
} 
 

 
#collapse { 
 
    color: #fff; 
 
    background: #494949; 
 
    border-radius: 10px; 
 
    width: 300px; 
 
    margin: 20px auto; 
 
    padding: 10px 0; 
 
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
} 
 

 
p { 
 
    font-size: 13px; 
 
} 
 

 
input { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 

 
label { 
 
    width: 90px; 
 
    margin: 0 auto; 
 
    margin-bottom: 5px; 
 
    display: block; 
 
    text-align: center; 
 
    color: #fff; 
 
    background-color: #4ada95; 
 
    border-radius: 5px; 
 
} 
 

 
label:hover { 
 
    color: #494949; 
 
} 
 

 
label::before {} 
 

 
#expand { 
 
    height: 225px; 
 
    overflow: hidden; 
 
    transition: height 0.5s; 
 
    background-color: #4ada95; 
 
    color: #FFF; 
 
    width: 250px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    border-radius: 10px; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
    padding: 10px; 
 
    margin: 0 auto; 
 
} 
 

 
section { 
 
    padding: 0 20px; 
 
} 
 

 
#toggle:checked~#expand { 
 
    height: 0px; 
 
} 
 

 
#toggle:checked~label::before { 
 
    display: hidden; 
 
}

<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"> 
 
    <link href="collapse.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <main> 
 
    <div id="collapse"> 
 
     <h2>Icon Quiz</h2> 
 
     <input id="toggle" type="checkbox" checked> 
 
     <label for="toggle">take quiz</label> 
 
     <div id="expand"> 
 
     <section> 
 
      <h3>which icon is used for GitHub?</h3> 
 
      <li><i class="fa fa-gitlab" aria-hidden="true"></i></li> 
 
      <li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li> 
 
      <li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li> 
 
     </section> 
 
     </div> 
 
    </div> 
 
    <div id="collapse"> 
 
     <h2>Another Quiz</h2> 
 
     <input id="toggle" type="checkbox" checked> 
 
     <label for="toggle">take quiz</label> 
 
     <div id="expand"> 
 
     <section> 
 
      <h3>test?</h3> 
 
      <li>blah</li> 
 
      <li>blah</li> 
 
      <li>blah</li> 
 
     </section> 
 
     </div> 
 
    </div> 
 
    </main> 
 
</body> 
 

 
</html>

來源

2017-09-01 hannacreed

您可以** **不能使用重複的ID在HTML –

你需要有唯一的ID。 ID應該只能使用一次。

body { 
 
    background: #CCC; 
 
    font-family: 'Varela Round', sans-serif; 
 
} 
 

 
#collapse { 
 
    color: #fff; 
 
    background: #494949; 
 
    border-radius: 10px; 
 
    width: 300px; 
 
    margin: 20px auto; 
 
    padding: 10px 0; 
 
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
} 
 

 
p { 
 
    font-size: 13px; 
 
} 
 

 
input { 
 
    display: none; 
 
    visibility: hidden; 
 
} 
 

 
label { 
 
    width: 90px; 
 
    margin: 0 auto; 
 
    margin-bottom: 5px; 
 
    display: block; 
 
    text-align: center; 
 
    color: #fff; 
 
    background-color: #4ada95; 
 
    border-radius: 5px; 
 
} 
 

 
label:hover { 
 
    color: #494949; 
 
} 
 

 
label::before {} 
 

 
#expand, 
 
#expand2{ 
 
    height: 225px; 
 
    overflow: hidden; 
 
    transition: height 0.5s; 
 
    background-color: #4ada95; 
 
    color: #FFF; 
 
    width: 250px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    border-radius: 10px; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
    padding: 10px; 
 
    margin: 0 auto; 
 
} 
 

 
section { 
 
    padding: 0 20px; 
 
} 
 

 
#toggle:checked~#expand { 
 
    height: 0px; 
 
} 
 

 
#toggle:checked~label::before { 
 
    display: hidden; 
 
} 
 

 
#toggle2:checked~#expand2 { 
 
    height: 0px; 
 
} 
 

 
#toggle2:checked~label::before { 
 
    display: hidden; 
 
}

<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"> 
 
    <link href="collapse.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <main> 
 
    <div id="collapse"> 
 
     <h2>Icon Quiz</h2> 
 
     <input id="toggle" type="checkbox" checked> 
 
     <label for="toggle">take quiz</label> 
 
     <div id="expand"> 
 
     <section> 
 
      <h3>which icon is used for GitHub?</h3> 
 
      <li><i class="fa fa-gitlab" aria-hidden="true"></i></li> 
 
      <li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li> 
 
      <li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li> 
 
     </section> 
 
     </div> 
 
    </div> 
 
    <div id="collapse"> 
 
     <h2>Another Quiz</h2> 
 
     <input id="toggle2" type="checkbox" checked> 
 
     <label for="toggle2">take quiz</label> 
 
     <div id="expand2"> 
 
     <section> 
 
      <h3>test?</h3> 
 
      <li>blah</li> 
 
      <li>blah</li> 
 
      <li>blah</li> 
 
     </section> 
 
     </div> 
 
    </div> 
 
    </main> 
 
</body> 
 

 
</html>

來源

2017-09-01 15:39:12 wrayvon

好，那會是一個很大的ID的XD – hannacreed

如何切換不同的div

回答

相關問題