別ページからのタブ切り替えの表示について

こちらのサイト（http://www.finefinefine.jp/web/kiji422/）を参考にタブの切り替えをしています。

ページAからページBのタブのコンテンツにダイレクトに飛べるように以下のスクリプトを設定しています。

ページAからボタンをクリックした時に、
全てのタブが開いている状態のパターンも作成したいと思っているのですが
やり方がわからず悩んでいます。

どなたかお分かりの方がおられましたら
どうかご教授頂けないでしょうか。


■ページAにリンクを設置

<a href="b.html?no=0">ページBのタブ1にジャンプ</a>

<a href="b.html?no=1">ページBのタブ2にジャンプ</a>

↓これを追加したいです。

<a href="">ページBのコンテンツ全て表示</a>


ページB（タブページ）に以下のスクリプトを設置

■java script

$(function() {
var n = window.location.href.slice(window.location.href.indexOf(‘?’) + 4);
$(“.content_wrap”).hide();
$(“.content_wrap”).eq(n).fadeIn();
$(“.tab li”).removeClass(‘select’);
$(“.tab li”).eq(n).addClass(‘select’)

$(“.tab li”).click(function() {
var num = $(“.tab li”).index(this);
$(“.content_wrap”).hide();
$(“.content_wrap”).eq(num).fadeIn();
$(“.tab li”).removeClass(‘select’);
$(this).addClass(‘select’)
});
});

$(function() {
var n = window.location.href.slice(window.location.href.indexOf(‘?’) + 4);
if(n.length < $(".content_wrap").size()) {
var p = $(".content_wrap").eq(n).offset().top;
$('html,body').animate({ scrollTop: p }, 'slow');
return false;
}
});


どうぞ宜しくお願いいたします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2012/10/04 18:19

No1です。

＞タブの初期値のclass指定、selectと
＞各コンテンツのclass指定、disnonは、全てはずしていますが、
＞タブページにそのままアクセスすると全て閉じたままになっています
classを利用しているのかしていないのかよくわかりませんが、classを使わずにスクリプトだけで処理しているということでしょうか？

＞disnonははずしておいて、全てのタブにclass="select"をつけたところうまく動作しました！
こちらの情報では、classを利用しているようにも見えますが…


結局、解決したのかしていないのか、よくわかってませんが・・・
いずれにしろ、#1にも書きましたように、

$(funciton(){
　　　//ここにどちらの場合でも行なう共通処理（1）
　if(/*全体表示なら*/){
　　 //ここに全体表示の場合の固有の処理（2）
　} else {
　　　//ここに個別表示の場合の処理（3）
　}
});
みたいなことでよいのではないでしょうか？

＞タブページにそのままアクセスすると全て閉じたままになっています
現状ではhide()処理で一旦全部を非表示にしているからで、これは多分（3）に入るべき処理かと想像されます。
タブの切り替えを全体表示の時に有効にするのかどうか不明ですが、有効にするのならイベント設定は（1）に、そうでないなら（3）になると思われます。

（2）のケースで、ソースをそのまま表示するだけでことたりるのなら（なんとなくそんな気がしますが）、結果的に（2）の処理は何もなくなるのではないでしょうか。
このあたりは何をどうしたいのかによるので、質問者様はご存知ですが、私には文章だけからではよくわかりませんでした。

ついでながら、
　$(function()～
を、わざわざ2つに分けて書いていますが、まとめても同じなので、上記のような構文のなかに全体を振り分けてしまえば、同じような判定を2度しなくても済む様になります。

この回答へのお礼

丁寧にわかりやすい説明をして下さってありがとうございます！

全てのタブの部分にclass="select"をつけたら、なんとか思うように動作しました。

基本があまりわかっていないので
fujillinさんが教えてくださったことを理解しながら、勉強したいと思います！
どうもありがとうございました！

お礼日時：2012/10/07 17:57

No.1 回答者： fujillin 回答日時： 2012/10/03 18:05

ご質問文からは、htmlの各要素の初期設定をどのようにしているのか不明ですが、参考サイトのようにclass=disnonを非表示となるようにcssで設定していると仮定して・・・

URIのクエリ部で渡すタブ番号に、全部開くという記号を決めておいて、その記号だったら全部表示というように処理すればよさそう。
具体的には、表示コンテンツ部分のclassのdisnonを削除して、show()をすればよろしいかと思います。
（hide()の処理をしていなければ、show()を実行する必要はありません）

この回答への補足

ご回答頂きありがとうございます！

htmlですが、

タブの初期値のclass指定、selectと
各コンテンツのclass指定、disnonは、全てはずしていますが、
タブページにそのままアクセスすると全て閉じたままになっています。

その記号の場合は、全部開くという方法はどのように処理すればいいのでしょうか。。あまり詳しくなくすみません。。


補足ですが、

scriotのスクロールは、タブがページの先頭にないので（スマホサイトです）
そこまでスクロールさせて表示させている感じです。

全て開く場合は、スクロールではなくページの先頭から表示させたいと思っています。

またその場合、全てのタブをselectした常態にしたいと思っています。

補足日時：2012/10/03 19:34

この回答へのお礼

スクロールをやめて、disnonははずしておいて、全てのタブにclass="select"をつけたところうまく動作しました！　どうもありがとうございました！！

お礼日時：2012/10/04 01:17