タグを押したら表示を切り替える

こんなことを説明しています！

  1. aタグとidを利用してタグを追加をしてもjsを書き換えなくても良い汎用性が高い実装方法を解説！

解説動画

 コードの説明

html コード

<ul class="tag-list">
    <li class="tag-item tag1"><a href="#tag1">tag1</a></li>
    <li class="tag-item tag2"><a href="#tag2">tag2</a></li>
    <li class="tag-item tag3"><a href="#tag3">tag3</a></li>
    <li class="tag-item tag4"><a href="#tag4">tag4</a></li>
</ul>

<div class="container container-tag1 js-open" id="tag1">
    <p class="text">
        tag1テキストtag1テキストtag1テキストtag1テキストtag1テキストtag1テキスト
        tag1テキストtag1テキストtag1テキストtag1テキストtag1テキストtag1テキスト
        tag1テキストtag1テキストtag1テキストtag1テキストtag1テキストtag1テキスト
        tag1テキストtag1テキストtag1テキストtag1テキストtag1テキストtag1テキスト
    </p>
</div>
<div class="container container-tag2" id="tag2">
    <p class="text">
        tag2テキストtag2テキストtag2テキストtag2テキストtag2テキストtag2テキスト
        tag2テキストtag2テキストtag2テキストtag2テキストtag2テキストtag2テキスト
        tag2テキストtag2テキストtag2テキストtag2テキストtag2テキストtag2テキスト
        tag2テキストtag2テキストtag2テキストtag2テキストtag2テキストtag2テキスト
    </p>
</div>
<div class="container container-tag3" id="tag3">
    <p class="text">
        tag3テキストtag3テキストtag3テキストtag3テキストtag3テキストtag3テキスト
        tag3テキストtag3テキストtag3テキストtag3テキストtag3テキストtag3テキスト
        tag3テキストtag3テキストtag3テキストtag3テキストtag3テキストtag3テキスト
        tag3テキストtag3テキストtag3テキストtag3テキストtag3テキストtag3テキスト
    </p>
</div>
<div class="container container-tag4" id="tag4">
    <p class="text">
        tag4テキストtag4テキストtag4テキストtag4テキストtag4テキストtag4テキスト
        tag4テキストtag4テキストtag4テキストtag4テキストtag4テキストtag4テキスト
        tag4テキストtag4テキストtag4テキストtag4テキストtag4テキストtag4テキスト
        tag4テキストtag4テキストtag4テキストtag4テキストtag4テキストtag4テキスト
    </p>
</div>

cssコード

.tag-list {
    display: flex;
    justify-content: center;
    column-gap: 40px;
}
.tag-item a {
    display: inline-block;
    padding: 20px 30px;
    font-size: 40px;
    border-radius: 20px 20px 0 0;
}
.tag-item.tag1 a {
    background: #ff8484;
}
.tag-item.tag2 a {
    background: #8db2fc;
}
.tag-item.tag3 a {
    background: #8bff83;
}
.tag-item.tag4 a {
    background: #f2f2f2;
}

.container {
    padding: 40px;
    font-size: 30px;
    line-height: 1.8;
    display: none;
    &.js-open {
        display: block;
    }
}
.container-tag1 {
    background: #ff8484;
}
.container-tag2 {
    background: #8db2fc;
}
.container-tag3 {
    background: #8bff83;
}
.container-tag4 {
    background: #f2f2f2;
}

JavaScriptコード

$('.tag-item').on('click', function () {
    $('.container').removeClass('js-open');
    $($(this).children('a').attr('href')).addClass('js-open');
    return false;
});

ポイント

▶︎ 全てのcontainer を非表示にします。

▶︎ .tag-item [ $(this) ] の 子要素のaタグ [ .children('a') ] の href属性( = #tag x ) [ .attr('href') ] に js-openクラスをつけます [ addClass('js-open') ] 

そうすると、tagを押したらそれに対応するcontainerに js-open クラスがつくようになります。

動画で使用したスニペット

javascript.json
"click": {
    "prefix": "click",
    "body": [
        "\\$('$1').on('click', function () {",
        "    $2",
        "    return false;",
        "});",
    ],
    "description": ""
},
ブログに戻る

コメントを残す