CSSでタブをつくる

borderをつかってタブ的な表現を目指しました。
切り替えにはJavaScriptをつかってます。

DEMO

HTML

<main class="main t1">   
    <ol class="tabs">
        <li class="tab t1">HELLO</li>
        <li class="tab t2">WORLD</li>
    </ol>
    
    <ol class="notes">
        <li class="note n1">
            <p class="txt">hello...</p>
        </li>
        <li class="note n2">
            <p class="txt">world...</p>
        </li>
    </ol>
</main>

SCSS

@import "compass/reset";

$borderColor: #bfc0c0;

.main {
    position: absolute;
    border-top: none;
    top: 20px; bottom: 20px;
    left: 20px; right: 20px;
    
    &.t1 {
        .tabs .t2 {
            border: none;
            border-bottom: solid 2px $borderColor;
            color: #888;
        }
        
        .notes .n2 {
            display: none;
        }
    }
    
    &.t2 {
        .tabs .t1 {
            border: none;
            border-bottom: solid 2px $borderColor;
            color: #888;
        }
        
        .notes .n1 {
            display: none;
        }
    }
}

.tabs {
    width: 100%; height: 42px;
    
    .tab {
        float: left;
        box-sizing: border-box;
        width: 50%; height: 42px;
        border: solid 2px $borderColor;
        border-bottom: none;
        border-radius: 10px 10px 0 0;
        color: #000;
        line-height: 42px;
        text-align: center;
        cursor: pointer;
    }
}

.notes {
    position: absolute;
    top: 42px; bottom: 0;
    left: 0; right: 0;
    border: solid 2px $borderColor;
    border-top: none;
    
    .note {
        padding: 40px 20px;
        word-wrap: break-word;
        line-height: 1.6em;
    }
    
    .n1 {
        color: #f39800;
    }
    
    .n2 {
        color: #a9cf52;
    }
}

JavaScript

(function(win, doc) {
 
     "use strict";
 
     var main = doc.querySelector(".main");

    doc.querySelector(".tabs").addEventListener("click", function(evt) {
        if (/t1/.test(evt.target.className)) {
            main.className = "main t1";
        } else {
            main.className = "main t2";
        }
    }, false);
 
 })(this, document);

今回は以上です。