こんにちは、デザイナーのKaです。
今回も、jQueryですぐに使いそうなサンプルコードということで、「タブの切替え」を書いていきたいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<main> <nav> <ul> <li><a href="#">ページ１</a></li> <li><a href="#">ページ２</a></li> <li><a href="#">ページ３</a></li> <li><a href="#">ページ４</a></li> </ul> </nav> <article> <section> <h3>ページ１</h3> <figure style="width:30%;float: left;"><img src="image1.jpg"></figure> <p style="width:70%;float: right;">ページ１テキストページ１<br> テキストページ１テキストページ１<br> テキストページ１テキストページ１テキストページ１テキスト<br> ページ１テキスト</p> </section> <section> <h3>ページ２</h3> <figure><img src="image2.jpg"></figure> <p>ページ２テキストページ２テキストページ２<br> テキストページ２テキストページ２テキストページ２テキストページ２テキストページ２テキスト</p> </section> <section> <h3>ページ３</h3> <figure><img src="image3.jpg"></figure> <p>ページ３テキストページ３テキストページ３テキストページ３<br> テキストページ３テキストページ３テキストページ３テキストページ３テキスト</p> </section> <section> <h3>ページ４</h3> <figure><img src="image4.jpg"></figure> <p>ページ４テキストページ４テキストページ４テキストページ４テキストページ４<br> テキストページ４テキストページ４テキストページ４テキスト</p> </section> </article> </main> |
タブはnavタグの中にul liタグで用意しています。
切替えコンテンツ枠は、sectionタグでタブと同じ数用意します。
中身は見出しにh3タグ、imgタグ、pタグを適当に入れています。
レイアウトとデザインのcssは、必要なものだけ用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
main { width: 1024px; margin: auto; } /* タブ */ nav { margin: 20px auto 40px; } nav ul { display: flex; justify-content: space-between; list-style: none; padding: 0; } nav ul li { width: 254px; } nav ul li a { display: block; padding: .5em; text-align: center; background: rgba(0,0,0,.08); border-bottom: 4px solid rgba(0,0,0,0.5); color: rgb(0,0,0); transition: background ease .5s, color ease .5s; } nav ul li a:hover { background: rgba(0,0,0,.03); } nav ul li a:focus, nav ul li a:active { background: rgba(0,0,0,0.5); color: rgb(255,255,255); } |
全体を中央に寄せるためにmainタグに横幅とmargin:auto; を指定し、
タブの方で見た目を分かりやすくするためにちょっとデザインしています。
最後にjqueryです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * 切替えコンテンツ枠の初期化 */ //sectionタグをすべて非表示にしてから、最初のsectionタグを表示にする $('section').hide().eq(0).show(); /** * タブのクリック操作 */ $('nav li').on('click', function(){ //クリックしたタブが何番目かを抽出 var index = $('nav li').index(this); //クリックしたタブの番号と同じ番号のsectionタグを表示し、それ以外のsectionタグを非表示にする $('section').eq(index).show().siblings().hide(); }); |
デモは以下になります。
ページ１
ページ１テキストページ１
テキストページ１テキストページ１
テキストページ１テキストページ１テキストページ１テキスト
ページ１テキスト
0
0