プログラミングに不慣れな中、現在ホームページを制作しております。
前提・実現したいこと
JavaScriptとCSSでタブを作成しております。
該当のソースコードでは2つのタブ内それぞれにテーブル(画像と文字)が表示されるようにしてます。
実現したいことは新たに3つ目のタブを追加して、動作検証したときに3つ目のタブがクリックされた(開かれた)状態で、
テーブル内全体の画像と文字を表示させ、他のタブをクリックしたときにはそれぞれ指定したdiv classの範囲内のみのテーブル(画像と文字)を表示させたいです。
下記画像のような感じです。
発生している問題・エラーメッセージ
該当のソースコードで動作を検証したときに下記画像のようにタブがクリックされていない、空白の状態になっております。
該当のソースコード(JavaScript)
<script> $(function(){ /*======================================= タブ切り替え =========================================*/ // タブメニューをクリックしたとき $('.js-tab > div').click(function(){ // タブメニューとタブコンテンツのクラス「active」を削除 $('.js-tab > div,.js-tab_content').removeClass('active'); // タブメニューのクラスを取得し、変数「tabClass」に格納(例:sky) var tabClass = $(this).attr('class'); // クリックしたタブメニューにクラス「active」を付与 $(this).addClass('active'); // それぞれのタブコンテンツに対して $('.js-tab_content').each(function(){ // 変数「tabClass」と、同じクラスがついたタブコンテンツに if($(this).attr('class').indexOf(tabClass) != -1){ // クラス「active」を付与し、フェードインしながら表示 $(this).addClass('active').fadeIn(); // それ以外のタブコンテンツは }else{ // 隠す $(this).hide(); } }); }); }); </script>
該当のソースコード(CSS)
<style> div {*zoom: 1;} div:after {display: block;content: "";clear: both;} .js-tab {margin-bottom: 20px;} .js-tab > div {float:left;width:20%;background:#666;color:#fff;text-align: center;padding:15px 0;cursor:pointer;} .js-tab > div.active {background:#000;} .js-tab_content {display:none;padding:20px 0;} .js-tab_content.active {display:block;} </style>
該当のソースコード(html)
<div class="js-tab"> <div class="Asample">Aサンプル</div> <div class="Bsample">Bサンプル</div> </div> <div class="js-tab_content Asample"> <p><table border="0" class="ritm col2"> <tbody> <tr> <td class="sample10"><img src="./img/catsample.jpg" style="width:240px;height:135px;" alt="" /><div class="mask"> <div class="caption">サンプル</div> </div> </td> <td class="sample10"><img src="./img/catsample.jpg" style="width:240px;height:135px;" alt="" /><div class="mask"> <div class="caption">サンプル</div> </div> </td> <td class="sample10"><img src="./img/catsample.jpg" style="width:240px;height:135px;" alt="" /><div class="mask"> <div class="caption">サンプル</div> </div> </td> </tr> <tr> <th><span style="color:#FFFFFF">サンプル</span></th> <th><span style="color:#FFFFFF">サンプル</span></th> <th><span style="color:#FFFFFF">サンプル</span></th> </tr> </tbody> </table> </p> </div> <!-- ★テーブルタグここから★ --> <div class="js-tab_content Bsample"> <p><table border="0" class="ritm col2"> <tbody> <tr> <td class="sample10"><img src="./img/catsample.jpg" style="width:240px;height:135px;" alt="" /><div class="mask"> <div class="caption">サンプル</div> </div> </td> <td class="sample10"><img src="./img/catsample.jpg" style="width:240px;height:135px;" alt="" /><div class="mask"> <div class="caption">サンプル</div> </div> </td> <td class="sample10"><img src="./img/catsample.jpg" style="width:240px;height:135px;" alt="" /><div class="mask"> <div class="caption">サンプル</div> </div> </td> </tr> <tr> <th><span style="color:#FFFFFF">サンプル</span></th> <th><span style="color:#FFFFFF">サンプル</span></th> <th><span style="color:#FFFFFF">サンプル</span></th> </tr> </tbody> </table> </p> </div>
補足情報(FW/ツールのバージョンなど)
ソースは一部省略しております。
回答1件
あなたの回答
tips
プレビュー