- ベストアンサー
クリックしたら文章が入れ替わるjQuery
- クリックしたら文章が入れ替わるjQueryについての質問です。上記のサイトを参考につくっています。タブではないのですが、添付画像のように数字部分を押すと中央部分の文章が入れ替わるというものです。1と2の部分は押すと文章が入れ替わり、3を押すと違うページに飛ぶようにしようと思っています。3のページにも同じ1~3のナビを置き、3から1、3から2にも飛ぶようにしたいのですが、このjsのままだと2を押しても1の内容が表示されてしまいます。それを変更したいのと、1か2がactiveの時に今どっちの内容を表示しているかわかるように色を変えたいのですが、変わりませんでした。以下私のコードです。
- この質問は、クリックしたら文章が入れ替わるjQueryに関するものです。上記のサイトを参考にしながら実装していますが、タブではなく、数字部分をクリックすると中央部分の文章が入れ替わるという仕様です。1と2の部分をクリックすると文章が切り替わり、3をクリックすると別のページに遷移するようにしたいです。また、3のページでも同じ1から3のナビゲーションを表示し、3から1や3から2にも遷移できるようにしたいですが、現在の状態だと2をクリックしても1の内容が表示されてしまいます。この問題を解決し、1か2がactiveの場合に現在表示している内容が分かるように色を変えたいですが、うまく動作しません。以下が私のコードです。
- この質問は、クリックしたら文章が入れ替わるjQueryについてです。上記のサイトを参考にしながら実装しています。タブのようではなく、数字部分をクリックすると中央部分の文章が切り替わるという仕様です。1と2をクリックすると文章が入れ替わり、3をクリックすると別のページに遷移するようにしたいと考えています。また、3のページにも同じ1から3のナビゲーションを表示し、3から1や3から2にも遷移できるようにしたいですが、現在の状態だと2をクリックしても1の内容が表示されてしまいます。この問題を修正し、1か2がactiveの場合に現在表示している内容が分かりやすくなるように色を変えたいのですが、うまくいきません。以下が私のコードです。
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
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://okwave.jp/qa/q6165618.html
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
別ページでの動作をどのようにしたいのかについては、No1様がおっしゃっているように意味がはっきりとわかりません。 完全に別ページなのか? その時にまったく同じスクリプトをを利用する必然性があるのか…などなど (動作が同じなのか違うのか不明。JSを外部ファイルにして同じものを利用したいのか否か など) >このjsのままだと2を押しても1の内容が表示されてしまいます。 別ページからこのページへジャンプした時に指定のタブを開いておきたいのであれば、ジャンプ元のリンク指定をハッシュ付き(#以下の指定)にしておいて、こちらのページで最初に表示するページを location.hash の内容によって決めるようにすればよいと思われます。 (現状は、必ず最初のタブ「 li.tabs:first 」が開くようになっているので) ついでに言えば、idの最初の文字はアルファベット(及び記号だったかな?)で数字はダメだったような… 全体のレイアウトも添付の画像と違いますが、それは置いておいて、 >activeの時に今どっちの内容を表示しているかわかるように >色を変えたいのですが、変わりませんでした。 をしたいのであれば、 > li.tabs active{ の部分を #nav li.active a { のようにすることで可能と思いますが、ご提示の内容のままだと文字色を同じ色に設定しているので、見かけ上の変化はないと思われます。
- yyr446
- ベストアンサー率65% (870/1330)
このサンプルのやり方では、不可能ですね。 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系のライブラリーというのを初めて耳にしました。 調べてみようと思います。 ありがとうございます。
補足
ご回答ありがとうございます。 説明下手で申し訳ありません。 元ページを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は置いておきます・・・) またご回答をいただけたら嬉しいです。 よろしくお願いいたします。