JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="tab-box">
            <ul class="tabtab">
                <li><a rel="div.tab1" class="left active" href="#tab1">Tab1</a></li>
                <li><a rel="div.tab2" class="center" href="#tab2">Tab2</a></li>
                <li><a rel="div.tab3" class="right"href="#tab3">Tab3</a></li>
            </ul>
            <div id="tab1" class="tab-content tab tab1">
                <p>aaaaaaaaaaaaa</p>
            </div>
            <div id="tab2" class="tab-content tab tab2">
                <p>bbbbbbbbbb</p>
            </div>
            <div id="tab3" class="tab-content tab tab3">
                <p>cccccccccccc</p>
            </div>
        </div>

CSS

.tab { display:none; } 



/* Tab */
#tab-box{
    width: 279px;
    height: 303px;
    background: url(http://webdesignrecipes.com/UI/images/tab-box-bg.png) no-repeat 0 0;
}

    #tab-box .tab{ /* ul */
        width: 265px;
        padding: 0;
        margin: 0 auto;
        padding-top: 5px;
    }

    #tab-box .tab li{ /* li */
        float: left;
        height: 29px;
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }
        #tab-box .tabtab a{ /* a */
            display: block;
            width: 88px;
            height: 100%;
            color: #909bc7;
            text-decoration: none;
            line-height: 29px;
            text-shadow: 0 1px 0 #fff;
        }
            /* タブの背景です */
            #tab-box .tabtab a.left{
                background: url(http://webdesignrecipes.com/UI/images/tab-left.png) no-repeat 0 0;
            }
            #tab-box .tabtab a.center{
                background: url(http://webdesignrecipes.com/UI/images/tab-center.png) no-repeat 0 0;
                width: 89px;
            }
            #tab-box .tabtab a.right{
                background: url(http://webdesignrecipes.com/UI/images/tab-right.png) no-repeat 0 0;
            }
            
            
                #tab-box .tabtab a.active{ /* active の時のクラス */
                    background-position: 0 100%;
                    color: #120eae;
                }
        
        /* タブのコンテンツ */
        #tab-box .tab-content{
            width:266px;
            height: 254px;
            overflow: hidden;
            margin: 5px;
        }
            #tab-box .tab-content p{
                margin: 20px;
            }

JavaScript

$(document).ready(function() {
    var alltabs = $('div.tab'); 
    var tabs = $('#tab-box');  
    
        alltabs.first().show();  
    tabs.find('li:first').addClass('over'); 
    tabs.find('a').live('click', function() {
        
        alltabs.hide()
            tabs.find('li').removeClass('over')
            $(this).parent().toggleClass('over')
                
    var tabref = $(this).attr('rel')
        $(tabref).fadeIn(300)
            this.blur()
    return false;
})
});