【jQuery】タブの切替スクリプトを作成してみました
2018/09/11
jQueryの練習で何かを作ってみようということで、yahooトップページのトピックスに使われているような、タブの切替を作ってみました。
HTMLは簡単にリストタグでタブ（もどき）を作り、その数だけdivで内容を作成。
divの中身は、本日のyahooのトピックスをコピペしたものです。
|
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<ul id="tab"> <li class="chose">トピックス</li> <li>経済</li> <li>エンタメ</li> <li>スポーツ</li> <li>その他</li> </ul> <div class="tabContents"> <ul class="listTitle"> <li>西宮中国大使が倒れ意識不明</li> <li>伸晃氏「福島第1サティアン」</li> <li>熱中症で児童11人搬送 和歌山</li> <li>包丁隠し持ちバス乗車 男逮捕</li> <li>Wii U発売日12月8日に決定</li> <li>佑、アマ相手でも結果残せず</li> <li>きゃりー妹分Yun*chiデビュー</li> <li>稲本 田中美保と宝石店デート</li> </ul> </div> <div class="tabContents invisible"> <ul class="listTitle"> <li>概算要求102兆円 過去最大に</li> <li>世界経済 2.3%成長に減速予測</li> <li>東京株 35円高8995円で終了NEW</li> <li>関電と九電、値上げ申請へNEW</li> <li>エアバス親会社と英BAE統合へ</li> <li>伊藤忠 米ドールの事業買収へ</li> <li>JR九州「斬新」にこめた思い</li> <li>デジカメ時代にチェキ好調</li> </ul> </div> <div class="tabContents invisible"> <ul class="listTitle"> <li>萩原聖人 10歳下声優と同せい</li> <li>松尾翠アナと交際 福永認める</li> <li>稲本 田中美保と宝石店デート</li> <li>ほっしゃん&尾野また撮られた</li> <li>ガリレオガリレイから2人脱退</li> <li>きゃりー妹分Yun*chiデビュー</li> <li>骨折の染五郎 驚異の回復ぶり</li> <li>芸能界にも金本引退惜しむ声</li> </ul> </div> <div class="tabContents invisible"> <ul class="listTitle"> <li>金本の「6」永久欠番検討へ</li> <li>落合氏、金本は真の4番だった</li> <li>佑、アマ相手でも結果残せずNEW</li> <li>1人で全守備位置 米マイナー</li> <li>長友「代表引っ張る存在に」</li> <li>Kリーグ 軍人クラブ強制降格</li> <li>宮尾、WBA王座&彼氏つかむ</li> <li>5冠アパパネ 屈けん炎で引退</li> </ul> </div> <div class="tabContents invisible"> <ul class="listTitle"> <li>温室ガス25%減 事実上撤回へ</li> <li>都公立いじめ疑い含め1万件超</li> <li>「侮辱」映像 YouTubeが制限</li> <li>習近平氏、腫瘍摘出手術か</li> <li>Apple 音楽SNS「Ping」廃止へ</li> <li>Wii U発売日12月8日に決定</li> </ul> </div> |
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 36 37 |
ul{ margin: 0; padding: 0; list-style-type: none; font-size: 0.9em; } #tab li{ padding: 10px; background-color: #eee; border: 1px solid #ccc; float: left; } #tab li.chose{ background-color: #ccc; } .invisible{ display: none; } .tabContents{ padding: 0; width: 500px; background-color: #ccc; clear: both; } ul.listTitle{ padding: 1em; text-align: left; } ul.listTitle li{ line-height: 130%; } |
で、JS部分。各行にコメントを付けてみました。
ここまで簡単に書けるものなんですね。改めてjQueryの有用性に驚いてしまいます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> $(function(){ $('#tab li').click(function(){ // クリックされた <li> のインデックス番号を取得 var num = $('#tab li').index(this); // tabContents に class="invisible" を追加 $('.tabContents').addClass('invisible'); // 取得したインデックス番号の class="invisible" を削除 $('.tabContents').eq(num).removeClass('invisible'); // リストに設定されている class="chose" を削除 $('#tab li').removeClass('chose'); // クリックされた <li> に class="chose" 追加 $(this).addClass('chose'); }); }); </script> |
デモ
プラグイン版
プラグイン化もしてみましたので、使用される方はどうぞ。
プラグインデモ：jquery.tgTabChange デモ（プラグイン版）
ダウンロード：
ダウンロード（jquery.tgTabChange.zip）
まとめ
参考にしたルーチンを読み、理解できるようになってきてはいるのですが、実際に書こうと思うと何をどう操れば実現できるのか悩んでしまいます。
慣れもあると思うのですが、さらに理解を進めていきたいところですね。