Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- 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": ""
},Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog