在选项卡式内容面板中打开的链接

时间:2016-10-04 21:10:34

标签: html css tabbed-browsing

美好的一天。如果我没有正确解释我在这里想要完成的事情,我会提前道歉。我正在使用垂直标签内容来展示美国和加拿大的业余曲棍球协会。您可以找到我的工作页面here

每个协会都在联盟的保护伞下。当您点击阿拉巴马州时,有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>&nbsp;</th>
                            <th>&nbsp;</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>&nbsp;</th>
                                <th>&nbsp;</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>&nbsp;</th>
                                <th>&nbsp;</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>&nbsp;</th>
                                            <th>&nbsp;</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>&nbsp;</th>
                                            <th>&nbsp;</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>

0 个答案:

没有答案