人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptについての質問です。ページ移行せずにタブで切り替えるページを作っています。まずは現在のコードが以下です。
■js
jQuery(function() {
var pages = jQuery('.section');
pages.hide();
if ( location.hash ) {
jQuery('html,body').scrollTop(0);
jQuery(location.hash).fadeIn();
} else {
pages.eq(0).fadeIn();
}
jQuery('.tab a').click(function(event){
event.preventDefault();
var nextPage = this.hash;
pages.hide();
jQuery(nextPage).fadeIn();
});
});
■HTML
<ul class="tab">
<li><a href="aaa#home"></li>
<li><a href="aaa#contact"></li>
</ul>
<div id="home" class="section"></div>
<div id="contact" class="section"></div>

現在の仕様としましては、
・タブをクリックしてもURLに#○○がつかない
・外部から直接 URL#○○にアクセスできる
となっていますが、要望としては、
・タブをクリックしてもURLに#○○がつかない(同じ)
・タブをクリックした際に、タブにクラス(current)を付ける
・外部から直接 URL#○○にアクセスできるが、URL表示には#○○がつかない
になります。
最後のURL表示については、そもそも無理な可能性があるのでスルーしていただいて、タブのクラス付けだけでも回答いただきたいと思います。どうぞよろしくお願いします。

●質問者: dekapurio
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●300ポイント ベストアンサー

こんな感じでどうでしょう。

jQuery(function() {
 var pages = jQuery('.section');
 var target = location.hash;
 pages.hide();
 if ( target ) {
 jQuery('html,body').scrollTop(0);
 jQuery(target).fadeIn();
// location.hash = ""; ★ハッシュ消しても、中途半端 (´・ω・`)
 jQuery('.tab li a[href="'+ target + '"]').attr("class", "current");
 } else {
 pages.eq(0).fadeIn();
 jQuery('.tab li a').eq(0).attr("class", "current");
 }
 jQuery('.tab a').click(function(event){
 event.preventDefault();
 jQuery('.tab li a').attr("class", "");
 jQuery(this).attr("class", "current");
 var nextPage = this.hash;
 pages.hide();
 jQuery(nextPage).fadeIn();
 });
});

URL の # が残っちゃいますが、これを消すと home に飛んじゃいます...

HTML は、こんな感じ。

<ul class="tab">
<li><a href="#home">home</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#etc">etc</a></li>
</ul>
<div id="home" class="section">home</div>
<div id="contact" class="section">contact</div>
<div id="etc" class="section">etc</div>

<style>
.current {
 background-color: pink;
}
</style>

jsFiddle で試してみたのが、こちらです(ハッシュ付きで呼び出したときの動作が確認できませんが)。
http://jsfiddle.net/1e6g2qrt/


dekapurioさんのコメント
HTMLソースを見てclassが付かないなと格闘してたんですが、これって擬似的に?classがついてるんですね。物凄い思い込みをしていました。どれだけググってもうまくいかないはずですね。。 class付けはうまくいきました!有難うございます。 # については難しそうですね。上記だと外部からのアクセスが出来ないのと、他のプログラム(#contactはページの下のほうにあるんですが、スクロールする前にURLが変わるので止まってしまう)が動かなくなりました。 上記コードのクラス付けだけのバージョンを教えていただければ幸いです。

dekapurioさんのコメント
すいません。外部からのアクセスは出来ました。

a-kuma3さんのコメント
>> 上記コードのクラス付けだけのバージョンを教えていただければ幸いです。 << 余計なこと、しなきゃよかったですね ><。 >|javascript| location.hash = ""; ||< の行を削除すれば、クラスの付け替えだけになります。 回答のコードも修正しておきました。

dekapurioさんのコメント
いえいえ、ありがとうございました。 ちなみに見よう見まねで以下を試してみて、うまくいったように見えたんですが、やはり#以降が消えた時点でページの一番上へいってしまいました。 jQuery(window).load(function(){ location.hash = ""; }); 他も色々と試してみたいと思います。 有難うございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ