プロが教えるわが家の防犯対策術！

JQueryタブの切替　タブからタブへリンクさせたい

解決済

  • 質問者：sotetunomi
  • 質問日時：
  • 回答数：4件

JavaScritp初心者です。宜しくお願い致します。

http://black-flag.net/jquery/20101014-1597.html
こちらを利用させていただいてタブの切替を行っています。

タブ【1】の中から、タブ【2】タブ【3】へリンクさせたいです。
タブ【1】の＜div id＝”#motion_area1”＞からタブ【2】へ
タブ【2】が開いた状態で、リンクです。

<script type="text/javascript">
$(function(){
$("a.btn_act").click(function(){
var connectCont = $("a.btn_act").index(this);
var showCont = connectCont+1;
$('.motion').css({display:'none'});
$('#motion_area'+(showCont)).fadeIn('slow');

$('a.btn_act').removeClass('active');
$(this).addClass('active');
});

});
</script>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑
これを改造してみました。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<script type="text/javascript">
$(function(){
$("a.btn_act1").click(function(){
var connectCont = $("a.btn_act1").index(this);
$('.motion').css({display:'none'});
$('#motion_area1').fadeIn('slow');
$('a.btn_act1').removeClass('active');
$(this).addClass('active');
});

$("a.btn_act2").click(function(){
var connectCont = $("a.btn_act2").index(this);
$('.motion').css({display:'none'});
$('#motion_area2').fadeIn('slow');
$('a.btn_act2').removeClass('active');
$(this).addClass('active');
});

$("a.btn_act3").click(function(){
var connectCont = $("a.btn_act3").index(this);
$('.motion').css({display:'none'});
$('#motion_area3').fadeIn('slow');
$('a.btn_act3').removeClass('active');
$(this).addClass('active');
});
});
</script>

各タブに名前を持たせればいいのかと思い、
クラスも分けてみて、各タブのリンク先も
<a href="#motion_area1" class="btn_act1 active">タブ1</a>
<a href="#motion_area2" class="btn_act2">タブ2</a>
<a href="#motion_area3" class="btn_act3">タブ３</a>
へ、飛ぶようにしました。
飛ぶにはとんだんですが、アクティブになるcssととび先がページの先頭に来ません。
なにか良い方法はないでしょうか。

宜しくお願い致します。

質問者からの補足コメント

  • ありがとうございます！
    本当にたすかっており、また、
    素晴らしい回答に驚いております。
    しかしながら、
    ちょっと私の説明不足で、申し訳ございません。

    例えば…
    <div id="tab_content1">TAB1の内容</div>
    この中に

    <div id="tab_content1">
    TAB1の内容<br />
    <a href="#tab_content3">TAB3にとぶ</a>
    </div>

    と入れたかったのです。
    でも飛びました！リンクが押せなかったので
    （z-index: -10;は消しました）

    本当にありがとうございます。
    そして更なる…要望なのですが。。。

    これを別ページからリンクさせたときに、
    ターゲットとしたタブを開くことは可能でしょうか。

    宜しければ教えて下さい。

    No.1の回答に寄せられた補足コメントです。 補足日時：2016/03/11 10:09
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

A#1～#3です



こんな感じでどうでしょうか？
※ CSSも含め、全体に少しずつ修正しています。
※ リンクの際のスクロール制御に関しては#1と同様です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.tab_set, .tab_set * { margin: 0; padding: 0; }
.tab_menu { position:relative; z-index:10; }
.tab_menu > a {
display: inline-block;
margin-right: 2px; padding: 2px 6px;
text-decoration: none;
background-color: #DDD;
border: 1px solid #888;
border-radius: 5px 5px 0 0;
}
.tab_menu > a.active {
background-color: #FFC;
border-bottom: 1px solid #FFC;
}
.tab_contents {
width: 600px; height: 200px;
padding: 5px;
border: 1px solid #888;
background-color: #FFC;
position:relative; top: -1px;
}
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">
$(function(){
var active = "active";

$(document).on("click", "a[href^='#']", function(){
return changeTab($(this).attr("href"));
});
$(".tab_set > .tab_menu > a:first-child").click();
changeTab(location.hash);

function changeTab(id){
var target = $(id);
if(target.length == 0) return;
var set = target.parent(".tab_contents").parent(".tab_set");
if(set.length == 0) return;
var index = $(".tab_contents > div", set).index(target);
$(".tab_menu > a", set).removeClass(active).eq(index).addClass(active);
$(".tab_contents > div", set).hide().eq(index).show();
}
});
</script>
</head>
<body>

<p>◆タブのテスト（タブ内でリンク）
<div class="tab_set">
<div class="tab_menu">
<a href="#tab_content1">TAB1</a>
<a href="#tab_content2">TAB2</a>
<a href="#tab_content3">TAB3</a>
</div>
<div class="tab_contents">
<div id="tab_content1">TAB1の内容 <a href="#tab_content2">TAB2へ</a></div>
<div id="tab_content2">TAB2の内容 <a href="#tab_content3">TAB3へ</a></div>
<div id="tab_content3">TAB3の内容 <a href="#tab_content1">TAB1へ</a></div>
</div>
</div>

<p>◆複数タブのテスト(タブ1へリンク）
<div class="tab_set">
<div class="tab_menu">
<a href="#hoge1">TAB4</a>
<a href="#hoge2">TAB5</a>
<a href="#hoge3">TAB6</a>
</div>
<div class="tab_contents">
<div id="hoge1">TAB4の内容 <a href="#tab_content1">TAB1へ</a></div>
<div id="hoge2">TAB5の内容 <a href="#tab_content1">TAB1へ</a></div>
<div id="hoge3">TAB6の内容 <a href="#tab_content1">TAB1へ</a></div>
</div>
</div>

</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

別ページから各タブへ飛びました！
すばらしく完璧です。
本当にありがとうございます。
感謝いたします。

通報する
お礼日時：2016/03/15 09:44

No.3

  • 回答者： fujillin
  • 回答日時：

A#2です。



z-indexの件は失礼しました。うっかりしてました。

＞これを別ページからリンクさせたときに、
＞ターゲットとしたタブを開くことは可能でしょうか。
可能ですよ。
通常のページ内リンク形式にしているので比較的やり易くなっていると言えるかも。
今、スクリプトを書ける環境にないので例は示せませんが、ロード時にURLのハッシュを調べて処理するようにすればよろしいかと思います。

ここの質問でも似たものが何度かあったと思いますので、検索してみるといくつも見つかると思います。
以下はその一例です。
https://oshiete.goo.ne.jp/qa/8130438.html
https://oshiete.goo.ne.jp/qa/6204592.html
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

ANo1です。



ピリオドが多いところがありました。訂正です。
（あってもなぜか動作しちゃうみたいですが、気持ち悪いので）

$(function(){
var active = "active";

$(".tab_set").each(function(){
$(".tab_menu > a", this).eq(0).addClass(active);
$(".tab_contents > div", this).hide().eq(0).show();
});

$("a[href^='#']").on("click", function(){
var target = $( $(this).attr("href"));
if(target.length == 0) return;
var set = target.parent(".tab_contents").parent(".tab_set");
if(set.length == 0) return;
var index = $(".tab_contents > div", set).index(target);
$(".tab_menu > a", set).removeClass(active).eq(index).addClass(active);
$(".tab_contents > div", set).hide().eq(index).show();
});
});
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



ページ内のどこにリンクがあってもタブを有効にしたいというようなことかと解釈しました。

ご提示のものとは発想が元から違ってしまいますが、いっそのことページ内リンクの形式を利用して、それがタブ内へのリンクだったらタブの切替をするというような作り方にしてしまえば良いのではないでしょうか？

・・・という発想でのサンプルです。
※ ご提示のスクリプトではフェードインとかスライドダウンになっているようですが、タブなので単純切り替え表示にしてあります。
※ クラスの構成でtab_setの中にtab_menu（以下にA要素）、tab_contents（以下にDIV要素）があるものを１単位として考えています。
※ 上記構成が複数あってもＯＫですが、入れ子での設置までは考慮していません。
※ ページ内リンクとidの組み合わせで、タブ用のメニュー以外でもリンクはタブに反映されます。

（インデントは全角空白にしてありますので半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.tab_set, .tab_set * { margin: 0; padding: 0; }
.tab_menu > a {
display: inline-block;
margin-right: 2px; padding: 2px 6px;
text-decoration: none;
border: 1px solid #888;
}

.tab_menu > a.active {
background-color: #FFC;
border-bottom: 1px solid #FFC;
}

.tab_contents {
width: 600px; height: 200px;
border: 1px solid #888;
background-color: #FFC;
position:relative; top: -1px; z-index: -10;
}
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">
$(function(){
　var active = "active"; //表示中を示すクラス名

　$(".tab_set").each(function(){
　　$("..tab_menu > a", this).eq(0).addClass(active);
　　$(".tab_contents > div", this).hide().eq(0).show();
　});

　$("a[href^='#']").on("click", function(){
　　var target = $( $(this).attr("href"));
　　if(target.length == 0) return;
　　var set = target.parent(".tab_contents").parent(".tab_set");
　　if(set.length == 0) return;
　　var index = $(".tab_contents > div", set).index(target);
　　$("..tab_menu > a", set).removeClass(active).eq(index).addClass(active);
　　$(".tab_contents > div", set).hide().eq(index).show();
　});
});
</script>
</head>
<body>

<p>◆タブのテスト
<div class="tab_set">
<div class="tab_menu">
<a href="#tab_content1">TAB1</a>
<a href="#tab_content2">TAB2</a>
<a href="#tab_content3">TAB3</a>
</div>
<div class="tab_contents">
<div id="tab_content1">TAB1の内容</div>
<div id="tab_content2">TAB2の内容</div>
<div id="tab_content3">TAB3の内容</div>
</div>
</div>

<p>◆複数タブのテスト
<div class="tab_set">
<div class="tab_menu">
<a href="#hoge1">TAB4</a>
<a href="#hoge2">TAB5</a>
<a href="#hoge3">TAB6</a>
</div>
<div class="tab_contents">
<div id="hoge1">TAB4の内容</div>
<div id="hoge2">TAB5の内容</div>
<div id="hoge3">TAB6の内容</div>
</div>
</div>

<p>◆ページ内リンクのテスト
<p>
<a href = "#tab_content1">TAB1へ</a>
<a href = "#tab_content3">TAB3へ</a>
<p>
<a href = "#hoge1">TAB4へ</a>
<a href = "#hoge2">TAB5へ</a>
<a href = "#hoge3">TAB6へ</a>

</body>
</html>


※ ページ内リンクの本来の機能で対象要素へとスクロールしますが、場合によってはチラチラ感じることがありそうな気がします。
※ 対象のタブ部分が表示されていたらスクロールしないように簡易的な制御をしたければ、以下の5行を追加してください。
　　（「+200」としているのは、「ある程度表示されていれば」というつもりのテキトーな数ですので調整願います。）
　var w = $(window), o = set.offset(), flag = true;
　if(o.top < w.scrollTop() || w.scrollTop() + w.height() < o.top + 200) flag = false;
　if(o.left < w.scrollLeft() || w.scrollLeft() + w.width() < o.left + 200) flag = false;
　if(!flag) set.get(0).scrollIntoView();
　return false;
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報