jqueryとcssでタブ
html
<p class="tab_btn active">タブ1</p>
<p class="tab_btn">タブ2</p>
<p class="tab_btn">タブ3</p>
<div class="tab_panel active">
<p>タブ1</p>
</div>
<div class="tab_panel">
<p>タブ2</p>
</div>
<div class="tab_panel">
<p>タブ3</p>
</div>
CSS
.btn_area {
margin: 0 10px;
display: flex;
}
.tab_btn {
width: 188px;
padding: 8px 0;
text-align: center;
cursor: pointer;
transition: all 0.2s ease 0s;
}
.tab_btn+.tab_btn {
margin-left: 8px;
}
.tab_btn:hover {
background-color: #dce1e4;
}
.tab_btn.active {
background: #07539f;
color: #fff;
}
.panel_area {
padding: 20px;
}
.tab_panel {
display: none;
}
.tab_panel.active {
display: block;
}
jquery
$(function(){
$('.tab_btn').click(function() {
var index = $('.tab_btn').index(this);
$('.tab_btn, .tab_panel').removeClass('active');
$(this).addClass('active');
$('.tab_panel').eq(index).addClass('active');
});
});
HOME > javascript > jqueryとcssでタブ
javascript
- slick sliderで逆にすると画像が表示されなかったり途中で切れる場合
- slick sliderのサムネイルを縦に流す
- formのoninput-output。結果を3桁ごとにカンマが入る数値タイプに変換
- マウスオーバー・マウスアウト(スマホの時はクリック)で画像を切り替えるjquery。
- querySelectorAllエレメントのhrefをforEachで削除する
- jQuery,Masonry,imagesloadedで画像を敷き詰める
- jQueryで特定のページからリンクされた後のページでclassを追加
- カレンダー
- 特定の要素を持っていたら(あったら)jQuery
- スクロールすると上からニョキッと降りてくるメニューjQuery
- マウス・マウスホイールで横スクロールするjavascript
- 横スクロール要素をマウスホイールで動かせるjavascript
- 特定の要素を持つ時にclassを付けるjQuery
- スクロールして現れたらアニメーション(フェード等)開始jquery
- MOREボタンで数件ずつ要素を表示wp
- slick 基本
- スクロールして表示するとフェードイン
- スクロールして表示されたタイミングでアクションを起こすjs
- スクロールするとメニューが上からゆっくり降りてきてヘッダー固定・Y座標0でメニューがスムーズに上がる(消える)
- Enterキーを押すとinputが空欄になるのを防ぐ
- jsでふわふわ縦に揺れる
- 特定の要素の幅と高さを取得するjavascript
- ウィンドウ幅リサイズごとにブラウザをリロードするjavascript
- サイトにローディングを実装するjavascript