こんばんは。ここで何を達成しようとしているのかを正しく説明していない場合は、事前に謝罪します。米国とカナダのアマチュア ホッケー協会を表示するために、縦方向にタブ化されたコンテンツを使用しています。私の作業ページはこちらにあります。
各協会はリーグの傘下にあります。たとえば、アラバマをクリックすると、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>