- ベストアンサー
【jQuery】画像タブ切り替えの上下配置について
- 【jQuery】画像タブ切り替えの上下配置について。質問内容は、ページ内で内容を切り替える「タブ（画像使用）」を使用したページを制作中。上部と下部のナビゲーションのステータスが同期せず詰まっている状態。タブの仕様は、１～４までの番号画像を配置し、本文１～４それぞれ該当した要素が表示されているときにタブ番号画像がアクティブ状態になるというもの。
- 上部タブを押してアクティブにしたときには連動して下部タブもアクティブになるようにしたい。実際の表示は、上部タブはアクティブになり下部タブは通常の状態となる。解決方法や使い方の情報が少ないため、手探り状態。解決方法を知っている方がいらっしゃいましたら教えていただきたい。
- 【jQuery】画像タブ切り替えの上下配置について。ページ内で内容を切り替える「タブ（画像使用）」を制作中。上部と下部のナビゲーションのステータスが同期せず詰まっている状態。タブの仕様は、１～４までの番号画像を配置し、本文１～４それぞれ該当した要素が表示されているときにタブ番号画像がアクティブ状態になるというもの。上部タブを押してアクティブにしたときには連動して下部タブもアクティブになるようにしたい。解決方法や使い方の情報が少ないため、手探り状態。解決方法を知っている方がいらっしゃいましたら教えていただきたい。
- co01
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 とりあえず、もとのサンプルソースに手を加えました。 参考にしてみてください。 変更箇所 <ul id="tab">を<ul class="tabbar">にして上下に用意。 JavaScript内の#tabで参照している部分をtabbarに変更。 初回表示時とクリック時の動作を変更。 == <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>【jQuery】画像タブ切り替えの上下配置について</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { var tab = '.tabbar li'; var tabSelectImg = '.tabbar li.selected img'; var tabBox = '#tabBox > div'; var selected = 'selected'; $(tabBox).hide(); if (location.hash) { $(location.hash).show(); $('.tabbar li.' + location.hash.substr(1)).addClass(selected); $(tabSelectImg).attr('src', $(tabSelectImg).attr('src').replace('_of.', '_on.')); } else { // 先頭のタブのclassを取得して同じクラス名がついているものにselectedを追加 // この場合tab1にselectedを追加 var firstTab = $(tab).first().attr('class'); $('.tabbar li.'+$(tab).first().attr('class')).addClass(selected); $(tabSelectImg).attr('src', $(tabSelectImg).attr('src').replace('_of.', '_on.')); $(tabBox).first().show(); } $(tab).click(function () { $(tabSelectImg).attr('src', $(tabSelectImg).attr('src').replace('_on.', '_of.')); $(tab).removeClass(selected); // クリックされたクラス名を取得して同じクラス名がついているものにselectedを追加 $('.tabbar li.'+$(this).attr('class')).addClass(selected); $(tabSelectImg).attr('src', $(tabSelectImg).attr('src').replace('_of.', '_on.').replace('_ov.', '_on.')); $(tabBox).hide(); var selectTab = $(this).find('a').attr('href'); location.hash = selectTab; $(selectTab).fadeIn(); return false; }); $(tab).hover(function () { $('img', this).attr('src', $('img', this).attr('src').replace('_of.', '_ov.')); }, function () { $('img', this).attr('src', $('img', this).attr('src').replace('_ov.', '_of.')); }); }); </script> <style type="text/css"> #tabArea,#tab { width: 800px; overflow: hidden; } #tabArea { margin: 0 auto 100px; text-align: left; } .tabbar li { float: left } #tabBox { clear: both; padding: 20px 0; border-bottom: solid 1px #9AC5E5; border-right: solid 1px #9AC5E5; border-left: solid 1px #9AC5E5; text-align: center; _zoom: 1; } #tabBox div { margin: -55px 0 0; padding: 55px 0 0; display: none; } </style> </head> <body> <div id="tabArea"> <ul class="tabbar"> <li class="tab1"><a href="#tab1"><img src="img/tab1_of.gif" alt="" width="200" height="35" /></a></li> <li class="tab2"><a href="#tab2"><img src="img/tab1_of.gif" alt="" width="200" height="35" /></a></li> <li class="tab3"><a href="#tab3"><img src="img/tab1_of.gif" alt="" width="200" height="35" /></a></li> <li class="tab4"><a href="#tab4"><img src="img/tab1_of.gif" alt="" width="200" height="35" /></a></li> </ul> <div id="tabBox"> <div id="tab1"> <p>タブ1タブ1タブ1タブ1タブ1タブ1タブ1タブ1タブ1タブ1タブ1タブ1</p> </div> <div id="tab2"> <p>タブ2タブ2タブ2タブ2タブ2タブ2タブ2タブ2タブ2タブ2タブ2タブ2</p> </div> <div id="tab3"> <p>タブ3タブ3タブ3タブ3タブ3タブ3タブ3タブ3タブ3タブ3タブ3タブ3</p> </div> <div id="tab4"> <p>タブ4タブ4タブ4タブ4タブ4タブ4タブ4タブ4タブ4タブ4タブ4タブ4</p> </div> </div> <ul class="tabbar"> <li class="tab1"><a href="#tab1"><img src="img/tab1_of.gif" alt="" width="200" height="35" /></a></li> <li class="tab2"><a href="#tab2"><img src="img/tab1_of.gif" alt="" width="200" height="35" /></a></li> <li class="tab3"><a href="#tab3"><img src="img/tab1_of.gif" alt="" width="200" height="35" /></a></li> <li class="tab4"><a href="#tab4"><img src="img/tab1_of.gif" alt="" width="200" height="35" /></a></li> </ul> </div> </body> </html>
お礼
ご回答ありがとうございます！ イメージ通りの上と下のタブ連動を確認させていただきました。 ご対応いただきありがとうございました!!