こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

【jQuery】画像タブ切り替えの上下配置について

はじめて質問させていただきます。
もしお分かりになる方がいらっしゃいましたら是非教えて頂けないでしょうか。

ただいま、下記のサイトを参考に
同じページ内で内容を切り替える「タブ(画像使用)」を使用したページを制作中です。
<参考ページ>http://depthcode.com/2011/08/tab-img.html

通常、タブの配置は1か所にて使用するかとおもいますが
ページの高さがあるため、切り替える部分の上部と下部に
同じ内容のタブスペースを設けたいと思うのですが
上部と下部のナビゲーションのステータスが同期せず詰まっている状態です。

タブの仕様は、
1~4までの番号画像(通常時とアクティブ時の2つの画像をそれぞれ用意)を配置し
本文1~4それぞれ該当した要素が表示されているときに
タブ番号画像がアクティブ状態になるというものです。
このタブを、たとえば<上部タブの1>を押してアクティブにしたときには
連動して<下部タブの1>もアクティブになる、というものとしたいのですが
上記サイト参照した場合だと上部タブはアクティブになり下部タブは通常の状態となります。
(画像のようになるのが理想です。現状は、下部タブのピンク色の「1」がとなりの「2」と同じ状態となります。)

※画像タブのサンプルコードや解説サイトが意外に少なくて本当に手探り状態です。
  あまりこういう使い方はされないものなのですかね…

解決方法などお分かりになる方がいらっしゃいましたら
お教えいただけると幸いです。どうぞよろしくおねがいします。

投稿日時 - 2012-01-04 21:01:24

QNo.7225373

すぐに回答ほしいです

質問者が選んだベストアンサー

こんにちは。

とりあえず、もとのサンプルソースに手を加えました。
参考にしてみてください。

変更箇所
<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>

投稿日時 - 2012-01-05 10:00:22

お礼

ご回答ありがとうございます!
イメージ通りの上と下のタブ連動を確認させていただきました。
ご対応いただきありがとうございました!!

投稿日時 - 2012-01-05 10:27:47

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問