How to make link on tab 2 clickable in this pure CSS tabs attempt

Discussion in 'HTML & Website Design' started by ketting00, Jan 25, 2015.

0
  1. #1
    Hi guys,
    I'm trying to make pure CSS tabs. I was successfully get it done, but the link on tab 2 is not clickable. And I was struck in there :(
    I suspect some layer has blocked the clicking, but I can't figure out. I past the whole thing here to help you figure it out easily.
    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Pure CSS Tabs</title>
        <style>
            .tabs { display: inline-block; margin-right: 25px;}
            .tabs input[type="radio"]{ display: none; }
            .tabs input:checked + a + ul {
                display: block;
                position: absolute;
                left: 0;
                top: 30px;
            }
            .tabs a:focus  + ul {
                display: block;
                position: absolute;
                left: 0;
                top: 30px;
                width: 100%;
                min-height: 350px;
                height: auto !important;
                background: #fff;
            }
            .tabs ul {
                display: none;
                width: 100%;
            }
            .tabs ul li { display: inline; margin-right: 10px; }
        </style>
    </head>
    <body>
        <div class=wrap>
            <div class=tabs tabindex=0>
                <input checked=checked type=radio />
                <a href='#' role=button>Tab 1</a>
                <ul>
                    <li><a href='home.php'>Link on tab 1</a></li>
                </ul>
            </div>
            <div class=tabs tabindex=0>
                <input type=radio />
                <a href='#' role=button>Tab 2</a>
                <ul>
                    <li><a href='index.php'>Link on tab 2</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>
    Code (markup):
    Thank you,
     
    ketting00, Jan 25, 2015 IP
  2. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #2
    Never mind. I got it done:
    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Pure CSS Tabs</title>
        <style>
            .warp {
             position: relative;
             width: 606px;
             margin: 0 auto;
            }

            label {
             cursor: pointer;
             width: 199px;
             display: inline-block;
             text-align: center;
             padding: 10px;
            }
           
            input:checked + label + ul{
             display: block;
             position: absolute;
             height: 120px;
             width: 100%;
             left: 0;
             z-index: 2;
             top: 0px;
             text-align: center;
             padding-top: 48px;
            }

            ul {
             display: none;
             font-size: 2em;
            }

            .tabs { display: inline-block; }

            input[type="radio"]{ display:none; }
        </style>
    </head>
    <body>
        <div class=warp>
          <div class=tabs tabindex=0>          
            <input id=tab1 name=tab checked=checked type=radio />
            <label for=tab1>Tab 1</label>
            <ul><li><a href='home.php'>Link on tab 1</a></li></ul>
          </div>
          <div class=tabs tabindex=0>
            <input id=tab2 name=tab type=radio />
            <label for=tab2>Tab 2</label>    
            <ul><li><a href='index.php'>Link on tab 2</a></li></ul>
          </div>
        </div>
    </body>
</html>
    Code (markup):
     
    ketting00, Jan 25, 2015 IP