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