1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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:
    772
    Likes Received:
    27
    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