0
내 홈페이지의 전체 코드입니다. 여기에서 tabcontent 클래스에서 만든 목록이 출력/표시 상자에 표시되지 않는 것으로 나타났습니다. 처음에는 목록이 총알에서 표시되지 않지만 서로 옆에 표시되었습니다. 그래서 탐색 바에 대해 ul 및 li에 대한 클래스를 수정/추가하고 목록 양식에 표시하기 시작했습니다. 그러나 글 머리 기호 목록은 올바르게 tabcontent 상자에 표시되지 않는 것 같습니다.글 머리 기호 목록이 선택한 컨테이너에 표시되지 않습니다.
function openTest(evt, testName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(testName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();body {
background-color: #d62929;
font-family: Verdana, sans-serif;
margin: 0;
}
.ul1 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}
.li1 {
float: left;
}
.li1 a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
.li1 a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}
.li1.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #c12525;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}
@media screen and (max-width: 600px) {
ul1 li1,
ul1 li1 {
float: none;
}
}
@media only screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}
footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}
.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}
/* Style the tab */
div.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: inherit;
padding: 0px 12px;
border: 1px solid #ccc;
width: 90%;
border-left: none;
height: 320px;
}<div class="flex-container">
<ul class="ul1">
<li class="li1"><a class="active" href="home.html">Home</a></li>
<li class="dropdown li1">
<a href="javascript:void(0)" class="dropbtn">Capacity Study</a>
<div class="dropdown-content">
<a href="mainFrame.html">Conduct Study</a>
<a href="report.html">Reports</a>
</div>
</li>
<li class="li1"><a href="contact.html">Contact</a></li>
</ul>
<br /><br /><br /><br /><br /><br />
<div class="tab">
<button class="tablinks" onclick="openTest(event, 'Full DRC')" id="defaultOpen">Full DRC</button>
<button class="tablinks" onclick="openTest(event, 'QDRC')">QDRC</button>
<button class="tablinks" onclick="openTest(event, 'Cold Screening')">Cold Screening</button>
<button class="tablinks" onclick="openTest(event, 'Hot Screening')">Hot Screening</button>
<button class="tablinks" onclick="openTest(event, 'VCT Room')">VCT Room</button>
</div>
<div id="Full DRC" class="tabcontent">
<h3>Full DRC</h3>
<p>Test Points Tested</p>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div id="QDRC" class="tabcontent">
<h3>QDRC</h3>
<p>Test Points Tested</p>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div id="Cold Screening" class="tabcontent">
<h3>Cold Screening</h3>
<p>Test Points Tested</p>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div id="Hot Screening" class="tabcontent">
<h3>Hot Screening</h3>
<p>Test Points Tested</p>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<div id="VCT Room" class="tabcontent">
<h3>Room</h3>
<p>Test Points Tested</p>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br />
<div>
<footer>
<p class="footp">©All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By :</p>
</footer>
</div>
</div>
'ul {display : inline-block; }'귀하의 CSS에. – AndroidNoobie
@AndroidNoobie 정말 고마워요. 그것은 완벽하게 작동합니다! – cerberus99