jQueryとCSSで簡単タブ切り替え【プラグイン無、コピペ化】

2019年3月12日2020年2月21日

最初にタブ切り替えサンプルを見せます

シンプル版

日本国憲法

吾輩は猫である

人間失格

日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上か

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を

恥の多い生涯を送って来ました。自分には、人間の生活というものが、見当つかないのです。自分は東北の田舎に生れましたので、汽車をはじめて見たのは、よほど大きくなってからでした。自分は停車場のブリッジを、上って、降りて、そうしてそれが線路をまたぎ越えるために造られたものだという事には全然気づかず、ただそれは停車場の構内を外国の遊戯場みたいに、複雑に楽しく、ハイカラにするためにのみ、設備せられてあるものだとばかり思っていました。しかも、かなり永い間そう思っていたのです。ブリッジの上ったり降りたりは、自分にはむしろ、ずいぶん垢抜けのした遊戯で、それは鉄道のサーヴィスの中でも、最も気のきいたサーヴィスの一つだと思っていたのですが、のちにそれはただ旅客が線路をまたぎ越えるための頗る実利的な階段に過ぎないのを発見して、にわかに興が覚めました。また、自分は子供の頃、絵本で地下鉄道というものを見て、これもやは

角丸版

日本国憲法

吾輩は猫である

人間失格

矢印付き版

日本国憲法

吾輩は猫である

人間失格

ソースコード

CSS

.tab_area .tab_btn_parent{
    box-sizing: border-box;
    display: table;
    table-layout: fixed;
    width: 100%;
    border-bottom: 2px solid #262626;
}

.tab_area .tab_btn_parent .tab_btn_children{
    box-sizing: border-box;
    display: table-cell;
    vertical-align:middle;
    text-align: center;
    padding: 5px;
    background-color: #919191;
    color: #FFF;
    font-weight: bold;
    cursor: pointer;
}

.tab_area .tab_btn_parent .tab_btn_children.radius{
    border-radius: 10px 10px 0 0;
}

.tab_area .tab_btn_parent .tab_btn_children.selected{
    position: relative;
    background-color: #262626;
}

.tab_area .tab_btn_parent .tab_btn_children.rolling.selected:before{
    position: absolute;
    left: 0;
    right: 0;
    top: -25px;
    content: '▼';
    font-size: 20px;
    color: #262626;
    animation: roll 2s linear infinite;
}

.tab_area .tab_show_parent{
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.tab_area .tab_show_parent > div{
    display: none;
}

@keyframes roll{
    from {
        transform: perspective(500px) rotateY(0deg);
    }
    50%{
        transform: perspective(500px) rotateY(180deg);
    }
    to{
        transform: perspective(500px) rotateY(360deg);
    }
}

HTML

角丸にしたい場合はclassにradiusを付与、矢印をつける場合はrollingを付与してください。

<!-- タブに関わる要素をすべて.tab_areaの親要素で括る -->
<div class="tab_area">
    <!-- タブ選択ボタン 表示させたい要素をdata-targetで選択 最初に表示させたい要素はclassにselectedを付与 -->
    <div class="tab_btn_parent">
        <div class="tab_btn_children radius rolling selected" data-target=".tab_text1">プロフィール</div>
        <div class="tab_btn_children radius rolling" data-target=".tab_text2">制作実績</div>
        <div class="tab_btn_children radius rolling" data-target=".tab_text3">お問い合わせ</div>
    </div>
    <!-- タブ選択表示要素 data-targetで選ばれた要素を表示する -->
    <div class="tab_show_parent">
        <div class="tab_text1">
            A
        </div>
        <div class="tab_text2">
            B
        </div>
        <div class="tab_text3">
            C
        </div>
    </div>
</div>

JavaScript(Jquery)

最初にJqueryライブラリを読み込んでくださいね。

<script type="text/javascript">
$(function(){
    //最初にselectedがついた要素を表示させるために関数呼び出し
    tab_select();
    
    //選択されたタブをselectedに切り替える
    $('.tab_area .tab_btn_parent .tab_btn_children').click(function(){
        $(this).closest('.tab_btn_parent').find('.tab_btn_children').removeClass('selected');
        $(this).addClass('selected');
        tab_select();
    });
    
    //選択されたタブに連動して表示させたい要素を表示する
    function tab_select(){
        $('.tab_area').each(function(key, value){
            $(value).find('.tab_show_parent div').hide();
            var target = $(value).find('.tab_btn_parent .tab_btn_children.selected').data('target');
            $(value).find('.tab_show_parent').find(target).show();
        });
    }
});
</script>

以上、jQueryとCSSで簡単タブ切り替え、でした。

jQuery