美好的一天，伙计们。如果我没有正确解释我在这里要完成的工作，我会提前道歉。我正在使用垂直标签的内容来显示美国和加拿大的业余曲棍球协会。你可以在这里找到我的工作页面。
每个协会都隶属于一个联盟。例如，当您单击阿拉巴马州时，有 3 个不同的联赛。我试图让联盟中的协会（球队）在同一个面板中开放。我想我可能会问如何在内容面板中放置一个框架。我尝试使用 target="_self" 属性无济于事，因为我猜测内容面板在技术上不被视为框架。任何有关更好显示方式的帮助或建议将不胜感激。再次，我为我缺乏技术发言而道歉。
我的代码
css
<style type="text/css">
a {
text - decoration: none;
color: #696969
}
</style>
<style type="text/css">
.tg {
border - collapse: collapse;
border - spacing: 0;
border - color: #aaa;
border - width: 1 px;
border - style: solid;
}
.tg td {
font - family: patua one;
font - size: 28 px;
padding: 10 px 15 px;
border - style: solid;
border - width: 0 px;
overflow: hidden;
word - break: normal;
border - color: #aaa;
color: #333;
background-color: # fff;
}
.tg th {
font - family: paladins;
font - size: 18 px;
font - weight: normal;
padding: 10 px 15 px;
border - style: solid;
border - width: 0 px;
overflow: hidden;
word - break: normal;
border - color: #696969;
color: # 696969;
background - color: #fff;
}
.tg.tg - yw4l {
vertical - align: top;
}
< /style> < style > h1 {
color: #696969;
font-family: 'paladins';
margin: 14px;
width: 80%;
}
.tabordion {
color: # ff6600;
display: block;
font - family: patua one;
font - style: italic;
font - size: 12 px;
margin: auto;
position: relative;
width: 100 %;
height: 1100 px;
}
.tabordion input[name "sections"] {
left: -9999 px;
position: absolute;
top: -9999 px;
}
.tabordion section {
display: block;
}
.tabordion section label {
background: #ffffff;
border: 1 px solid# ff6600;
cursor: pointer;
display: block;
font - size: 1.2e m;
font - weight: normal;
padding: 10 px 17 px;
position: relative;
width: 180 px;
z - index: 100;
}
.tabordion section article {
display: none;
left: 230 px;
min - width: 300 px;
padding: 0 0 0 21 px;
position: absolute;
top: 0;
}
.tabordion section article: after {
background - color: #696969;
bottom: 0;
content: "";
display: block;
left: -229px;
position: absolute;
top: 0;
width: 218px;
z-index: 1;
height: 1100px;
}
.tabordion input[name "sections"]: checked + label {
background: #ff6600;
color: #fff;
}
.tabordion input[name "sections"]: checked~article {
display: block;
}
@ media(max - width: 533 px) {
h1 {
width: 100 %;
}
.tabordion {
width: 100 %;
}
.tabordion section label {
font - size: 12 px;
width: 160 px;
}
.tabordion section article {
left: 200 px;
min - width: 270 px;
}
.tabordion section article: after {
background - color: #ccc;
bottom: 0;
content: "";
display: block;
left: -199 px;
position: absolute;
top: 0;
width: 200 px;
}
}
@ media(max - width: 768 px) {
h1 {
width: 96 %;
}
.tabordion {
width: 96 %;
}
}
@ media(min - width: 1366 px) {
h1 {
width: 70 %;
}
.tabordion {
width: 70 %;
}
}
</style>
HTML
<div class="tabordion">
<section id="section1">
<input type="radio" name="sections" id="option1" checked>
<label for="option1">Alabama</label>
<article>
<table class="tg">
<tbody>
<tr>
<th class="tg-yw4l">
<a href="http://www.realtimehockey.net" target="_self">
<img alt="Tier 1 Elite Hockey" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/Tier1Elite_zpsyxfxo2xc.png" title="Tier 1 Elite Hockey" />
</a>
</th>
<th style="text-align: left">
<a href="http://www.realtimehockey.net" target="_self" title="Tier 1 Elite Hockey">
<span style="color: #696969">TIER 1 ELITE HOCKEY</span>
</a>
</th>
<th>
<a href="mailto:akallstar_ice@hotmail.com" target="_self">
<img alt="Contact Tier 1 Elite Hockey" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Tier 1 Elite Hockey" />
</a>
</th>
<th>
<a href="http://www.realtimehockey.net" target="_self">
<img alt="Like Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska All Stars" />
</a>
</th>
<th> </th>
<th> </th>
</tr>
<tr>
<th class="tg-yw4l">
<a href="http://www.realtimehockey.net" target="_blank">
<img alt="Anaheim Jr. Ducks - Ananheim, CA" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/AnaheimJrDucksLogo2_zpscvlvog14.png" title="Anaheim Jr. Ducks - Anaheim, CA" />
</a>
</th>
<th style="text-align: left">
<a href="http://www.realtimehockey.net">ANAHEIM JR. DUCKS</a>
</th>
<th>
<a href="mailto:" target="_blank">
<img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" />
</a>
</th>
<th>
<a href="http://www.realtimehockey.net" target="_blank">
<img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" />
</a>
</th>
<th>
<a href="http://www.realtimehockey.net" target="_blank">
<img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" />
</a>
</th>
</tr>
<tr>
<th class="tg-yw4l">
<a href="#" target="_blank">
<img alt="Belle Tire - Taylor, MI" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/BelleTireLogo2_zps2gmbaf1a.png" title="Belle Tire - Taylor, MI" />
</a>
</th>
<th style="text-align: left">
<a href="#">BELLE TIRE</a>
</th>
<th>
<a href="mailto:" target="_blank">
<img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" />
</a>
</th>
</tr>
</tbody>
</table>
</article>
</section>
<section id="section2">
<input type="radio" name="sections" id="option2">
<label for="option2">Alaska</label>
<article>
<table class="tg">
<tbody>
<tr>
<th class="tg-yw4l">
<a href="#" target="_blank">
<img alt="ASHA - Alaska" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/ASHA1_zpszceufh7t.jpg" title="ASHA - Alaska" />
</a>
</th>
<th style="text-align: left">
<a href="#" title="ASHA - Alaska">
<span style="color: #696969">ALASKA STATE HOCKEY ASSOCIATION</span>
</a>
</th>
<th>
<a href="mailto:darrylthompson@akdltlaw.com" target="_top">
<img alt="Contact ASHA" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact ASHA" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Like ASHA" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like ASHA" />
</a>
</th>
<th> </th>
<th> </th>
</tr>
<tr>
<th class="tg-yw4l">
<a href="#" target="_blank">
<img alt="Alaska All Stars - Anchorage, AK" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Team%20Logos/AlaskaAllStarsLogo_zpszqtsgye2.png" title="Alaska All Stars - Anchorage, AK" />
</a>
</th>
<th style="text-align: left">
<a href="#" title="Alaska All Stars - Anchorage, AK">
<span style="color: #696969">ALASKA ALL STARS</span>
</a>
</th>
<th>
<a href="mailto:akallstar_ice@hotmail.com" target="_top">
<img alt="Contact Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Alaska All Stars" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Like Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska All Stars" />
</a>
</th>
<th> </th>
<th> </th>
</tr>
<tr>
<th class="tg-yw4l">
<a href="#" target="_blank">
<img src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/AlaskaBlueDevilsLogo_zpsldn65akh.png"
height="80" alt="Alaska Blue Devils - Eagle River, AK" title="Alaska Blue Devils - Eagle River, AK"/>
</a>
</th>
<th style="text-align: left">
<a href="#" title="Alaska Blue Devils - Eagle River, AK">ALASKA BLUE DEVILS</a>
</th>
<th>
<a href="mailto:mlaflamme@gci.net" target="_top">
<img alt="Contact Alaska Blue Devils" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Alaska Blue Devils" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Like Alaska Blue Devils" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska Blue Devils" />
</a>
</th>
<th></th>
<th></th>
</tr>
</tbody>
</table>
</article>
</section>
<section id="section3">
<input type="radio" name="sections" id="option3">
<label for="option3">Arizona</label>
<article>
<table>
<tbody>
<tr>
<th class="tg-yw4l">
<a href="#" target="_blank">
<img alt="Airdrie Lightning - Airdrie, AB" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/AirdrieLightningLogo_zpsciougcnu.png" title="Airdrie Lightning - Airdrie, AB" />
</a>
</th>
<th style="text-align: left">
<a href="#">AIRDRIE LIGHTNING</a>
</th>
<th>
<a href="mailto:" target="_blank">
<img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" />
</a>
</th>
</tr>
<tr>
<th class="tg-yw4l">
<a href="#" target="_blank">
<img alt="Calgary Buffaloes - Calgary, AB" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/CalgaryBuffaloesLogo_zpsbinsmcud.png" title="Calgary Buffaloes - Calgary, AB" />
</a>
</th>
<th style="text-align: left">
<a href="#">CALGARY BUFFALOES</a>
</th>
<th>
<a href="mailto:" target="_blank">
<img alt="Contact Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Allegheny Badgers" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Like Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Allegheny Badgers" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/TwitterOutline_zpsosoihiyg.png" title="Follow Allegheny Badgers" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Follow Allegheny Badgers" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/InstagramOutline_zpsgve0akhq.png" title="Follow Allegheny Badgers" />
</a>
</th>
</tr>
</tbody>
</table>
</article>
</section>
<section id="section4">
<input type="radio" name="sections" id="option4">
<label for="option4">Arkansas</label>
<article></article>
</section>
<section id="section5">
<input type="radio" name="sections" id="option5">
<label for="option5">California</label>
<article>
<table class="tg">
<tbody>
<tr>
<th class="tg-yw4l">
<a href="#" target="_blank">
<img alt="ASHA - Alaska" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Association%20Logos/ASHA1_zpszceufh7t.jpg" title="ASHA - Alaska" />
</a>
</th>
<th style="text-align: left">
<a href="#" title="ASHA - Alaska">
<span style="color: #696969">ALASKA STATE HOCKEY ASSOCIATION</span>
</a>
</th>
<th>
<a href="mailto:darrylthompson@akdltlaw.com" target="_top">
<img alt="Contact ASHA" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact ASHA" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Like ASHA" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like ASHA" />
</a>
</th>
<th> </th>
<th> </th>
</tr>
<tr>
<th class="tg-yw4l">
<a href="#" target="_blank">
<img alt="Alaska All Stars - Anchorage, AK" border="0" height="80" src="http://i1314.photobucket.com/albums/t563/RTH13/Team%20Logos/AlaskaAllStarsLogo_zpszqtsgye2.png" title="Alaska All Stars - Anchorage, AK" />
</a>
</th>
<th style="text-align: left">
<a href="#" title="Alaska All Stars - Anchorage, AK">
<span style="color: #696969">ALASKA ALL STARS</span>
</a>
</th>
<th>
<a href="mailto:akallstar_ice@hotmail.com" target="_top">
<img alt="Contact Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Alaska All Stars" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Like Alaska All Stars" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska All Stars" />
</a>
</th>
<th> </th>
<th> </th>
</tr>
<tr>
<th class="tg-yw4l">
<a href="#" target="_blank">
<img src="http://i1314.photobucket.com/albums/t563/RTH13/TeamLogos/AlaskaBlueDevilsLogo_zpsldn65akh.png"
height="80" alt="Alaska Blue Devils - Eagle River, AK" title="Alaska Blue Devils - Eagle River, AK"/>
</a>
</th>
<th style="text-align: left">
<a href="#" title="Alaska Blue Devils - Eagle River, AK">ALASKA BLUE DEVILS</a>
</th>
<th>
<a href="mailto:mlaflamme@gci.net" target="_top">
<img alt="Contact Alaska Blue Devils" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/ContactOutline_zpsbya4zuwl.png" title="Contact Alaska Blue Devils" />
</a>
</th>
<th>
<a href="#" target="_blank">
<img alt="Like Alaska Blue Devils" border="0" height="40" src="http://i1314.photobucket.com/albums/t563/RTH13/Social%20Icons/FaceBookOutline_zpspyhcv2py.png" title="Like Alaska Blue Devils" />
</a>
</th>
<th></th>
<th></th>
</tr>
</tbody>
</table>
</article>
</div>