クリックしたら文章が入れ替わるjQuery

クリックしたら文章が入れ替わるjQuery

http://www.sohtanaka.com/web-design/simple-tabs- …
上記のサイトを参考につくっています。
タブではないのですが、添付画像のように数字部分を押すと中央部分の文章が入れ替わるというものです。

1と2の部分は押すと文章が入れ替わり、3を押すと違うページに飛ぶようにしようと思っています。
3のページにも同じ1～3のナビを置き、3から1、3から2にも飛ぶようにしたいのですが、このjsのままだと2を押しても1の内容が表示されてしまいます。
それを変更したいのと、
1か2がactiveの時に今どっちの内容を表示しているかわかるように色を変えたいのですが、変わりませんでした。
（サンプルだとちゃんとタブが切り替わっているようにみえるのでそのようにしたい。）
以下私のコードです。



■■■■■■■■■■■■HTML■■■■■■■■■■■■
<div id="nav">
<ul>
<li class="tabs"><a href="#1" >1</a></li>
<li class="tabs"><a href="#2">2</a></li>
<li><a href="3.html">3</a></li>
</ul>
</div>

<div class="container">
<div id="1" class="content">　１の文章　</div>
<div id="2" class="content">　２の文章　</div>
</div>


■■■■■■■■■■■■js■■■■■■■■■■■■
$(document).ready(function() {
$(".content").hide();
$("li.tabs:first").addClass("active").show();
$(".content:first").show();

//On Click Event
$("li.tabs").click(function() {
$("li.tabs").removeClass("active");
$(this).addClass("active");
$(".content").hide();

var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});


■■■■■■■■■■■■CSS■■■■■■■■■■■■
#nav li a{
color:#8D8D8D;
text-shadow: 0px 0px 3px #fff;
}

#nav li a:hover{
color:#8D8D8D;
text-shadow: 1px 1px 0px rgba(0,0,0,0.8);
}

li.tabs active{ ←ここが変？
color:#8D8D8D;
}




ド素人の上説明も下手で申し訳ありませんが、よろしくお願いいたします。

No.3 ベストアンサー 回答者： fujillin 回答日時： 2010/09/14 21:51

No2です。

＞まさにこれです
それなら、可能だと思います。
リンク元の参照方法はご提示の方法でよろしいかと。

後は、スクリプトの最初の方を　（以下、大変手抜きです）

var tbn = location.hash; //ハッシュの内容を取得
tbn = (tbn == "#2")?1:0; //#2なら1、それ以外なら0に（indexが0始まりなので）

$(".content").hide();
$("li.tabs:eq(" + tbn + ")").addClass("active").show();
$(".content:eq(" + tbn + ")").show();


みたいにすることで一応可能です。ただし（↑）は大変な手抜きです。
ご提示のソースの表示すべきタブが2種類しかないので、直接比較して判断してしまっています。
（「2なら1、それ以外は0に」の部分）なので、2個以上あると動作がおかしくなります。

ちゃんとやるなら、
　1）ハッシュの有無を確認（無ければ開くのは最初のタブ）
　2）ソース内のタブのリンク要素のリンク先から、ハッシュと同じものを探す
　3）同じものがあればそのタブを、無ければ最初のタブを開く
というような処理にしておくのが本来でしょう。
研究してみてください。

idで識別するのもtab部はULで、コンテンツ部はclass="conteiner"のdivにしてしまいたい気もしますが…



つい最近の質問で、ほとんど同じ内容のものがありました。
そこに出ている参考サイトが、ご参考になるかと思います。
　http://oshiete.goo.ne.jp/qa/6165618.html

No.2 回答者： fujillin 回答日時： 2010/09/14 14:55

別ページでの動作をどのようにしたいのかについては、No1様がおっしゃっているように意味がはっきりとわかりません。

完全に別ページなのか？　その時にまったく同じスクリプトをを利用する必然性があるのか…などなど
（動作が同じなのか違うのか不明。JSを外部ファイルにして同じものを利用したいのか否か　など）

＞このjsのままだと2を押しても1の内容が表示されてしまいます。
別ページからこのページへジャンプした時に指定のタブを開いておきたいのであれば、ジャンプ元のリンク指定をハッシュ付き（#以下の指定)にしておいて、こちらのページで最初に表示するページを location.hash　の内容によって決めるようにすればよいと思われます。
（現状は、必ず最初のタブ「 li.tabs:first 」が開くようになっているので）

ついでに言えば、idの最初の文字はアルファベット（及び記号だったかな？）で数字はダメだったような…

全体のレイアウトも添付の画像と違いますが、それは置いておいて、
＞activeの時に今どっちの内容を表示しているかわかるように
＞色を変えたいのですが、変わりませんでした。
をしたいのであれば、
＞　li.tabs active{
の部分を
　#nav li.active a {
のようにすることで可能と思いますが、ご提示の内容のままだと文字色を同じ色に設定しているので、見かけ上の変化はないと思われます。

この回答への補足

ご回答ありがとうございます。
説明下手で申し訳ありません。

元ページをindex.html
別ページを3.html　とします。
3.htmlには文章が切り替わるスクリプトは使いません。


＞別ページからこのページへジャンプした時に指定のタブを開いておきたいのであれば、
まさにこれです(｀；ω；´)

＞ジャンプ元のリンク指定をハッシュ付き（#以下の指定)にしておいて、
＞こちらのページで最初に表示するページを location.hash　の内容によって決めるようにすればよい
とてもわかりやすいご説明なのですが、私の力不足でやり方がわかりません・・・

変更すべき箇所は、スクリプト部分でしょうか？

また、3.htmlでの指定方法は

<div id="nav">
<ul>
<li><a href="index.html#1">1</a></li>
<li><a href="index.html#i2">2</a></li>
<li><a href="3.html">3</a></li>
</ul>
</div>
であってますでしょうか。
・・・あってなさそうですね。



＞idの最初の文字はアルファベット（及び記号だったかな？）で数字はダメだったような…
ご指摘ありがとうございます。
画像作るときに1.2.3と付けてしまったのでそのまま数字でidを指定してしまいました。
作っているものはアルファベットを使っております☆

css部分も位置等の指定は省いて書かせていただきました。
細かなとこまで見ていただいて本当に有難く思いますm(__)m
文字色は同じですが、text-shadowで見かけの変化をつけようと思っています。
（ieは置いておきます・・・）


またご回答をいただけたら嬉しいです。
よろしくお願いいたします。

補足日時：2010/09/14 19:26

No.1 回答者： yyr446 回答日時： 2010/09/14 09:50

このサンプルのやり方では、不可能ですね。

3.htmlは別ページですよね。
その場合、
あなたは3.htmlへページ遷移して、制御を引継ぎたいのか？
もしくは、もとのページの中に3.htmlを表示したいのか？

で、仕組みががらっと変わります。
さらに、もとのページに表示したい場合、
iframeで表示して制御するのか、<div class="container">の中身を
動的に、書き換えたいのかによっても、仕様がかわります。

いずれにせよ、サンプルのコードの大幅な修正となります。
私なら改造は面倒なので別途作るか、他のAJAXもOKなXX-BOX系の
ライブラリーを使います。

この回答への補足

ご回答ありがとうございます。
説明下手で申し訳ございません。

もとのページをindex.htmlとします。
そこから3を押すと3.htmlにページ遷移し、3.htmlで1を押したら1の内容、2を押したら2の内容がindex.htmlに戻って表示されるようにしたいのです。

＞私なら改造は面倒なので別途作るか、他のAJAXもOKなXX-BOX系のライブラリーを使います。
やはり改造は面倒ですよね・・・
XX-BOX系のライブラリーというのを初めて耳にしました。
調べてみようと思います。
ありがとうございます。

補足日時：2010/09/14 18:13