JSFiddle - React, Tailwind, and code Playground

by nju33

HTML

<ul class="tab">
    <li class="selected">(´・ω・｀)</li>
    <li class="no-selected">ヽ(*ﾟω｡)ﾉ</li>
    <li class="no-selected">(｡◟‸◞｡✿)</li>
    <li class="no-selected">٩(๑`^´๑)۶</li>
</ul>

<div class="contents">
    <div>
        <p>ショボーン</p>
    </div>
    <div>
        <p>どてっ</p>
    </div>
    <div>
        <p>おこだよ！</p>
    </div>
    <div>
        <p>激おこぷんぷん丸</p>
    </div>
    
</div>

SCSS

@import "http://db.tt/9AQJciWR"

html {
    font-size: 100%;
}

body {
    margin: 0 0 0 2em;
    font-size: 15px;
    width: 30em;
    color: #3c3c3c;
}

.tab {
    list-style: none;
    display: table;
    width: inherit;
    margin-top: 2em;
    padding: 0;
}

.tab > li {
    display: table-cell;
    cursor: pointer;
    text-align: center;
    padding: .3em 0
}

.selected {
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #3c3c3c;
}

.no-selected {
    border-bottom: 1px solid #3c3c3c;
    background-color: #3c3c3c;
}

.contents {
    border-width: 0 5px 5px 5px;
    border-style: solid;
    padding: 1em;
    position: relative;
    bottom: 1em;
}
}

JavaScript

$(function() { 
    var $current = $("ul.tab > li.selected");
    var $content = $("div.contents > div")
    $content
        .not("div:eq(" + $current.index() + ")")
        .css("display", "none");
    
    $("ul.tab > li").on("click", function() {
        var $self = $(this);
        if( $self.hasClass("no-selected") ) {
            $current
                .removeClass("selected")
                .addClass("no-selected");
            $content
                .filter("div:eq(" + $current.index() + ")")
                .css("display", "none");
            $current = $self;
            $current
                .removeClass("no-selected")
                .addClass("selected");
            $content
                .filter("div:eq(" + $current.index() + ")")
                .css("display", "block");
        }
    });
});