location.hashの遷移

解決済

質問者：hiro_033
質問日時：2013/02/01 04:39
回答数：2件

jQueryを使ってウィザード形式の画面を作ろうとしております。
「次へ」のリンクは画面に一つだけ設置し、動的にリンク先のハッシュを変えるようにし、
画面は、リンク先のIDボックスを表示するという仕組みです。

しかし、以下のコードで実行すると、画面は指定したものが表示されますが、アドレスには一つ先の飛び先が表示されます。
この現象が、どういうことかわかりませんので、どなたか教えて頂けないでしょうか？

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><script src="http://code.jquery.com/jquery-1.9.0.min.js"></sc …
<script>
$(function(){
$('#next').click(function(){
$('.page').hide();
$($(this).attr('href')).show();

$(this).attr('href','#step2');
});
});
</script>
</head>
<body>
<a id="next" href="#step1">次へ</a>
<div id="top" class="page">top</div>
<div id="step1" class="page" style="display:none;">step1</div>
<div id="step2" class="page" style="display:none;">step2</div>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (2件)

No.1

回答者： fujillin
回答日時：2013/02/01 15:08

推測での回答ですが…

クリックした時に以下の処理が起こっていると推測します。
　1.リンク要素をユーザがクリック
　2.スクリプトが表示処理とhref属性変更処理を行なう
　3.ブラウザ側がクリック時の通常処理を行なう
　　（2で変えられた#step2を表示し、アドレスバーにそのURIを表示）

3の処理の際に、#step2の要素は非表示設定になっているため、結果的に、アドレスバーの表示だけが変わることになっているのではないｋと推測します。

お考えのようになさりたいのであれば、
　2.の処理ではhrefの変更を行なわず
　3.の処理をブラウザに行なわせた後で
　2.の後半の処理（または2全体の処理）を行なう
ように順序を変えればよろしいかと思います。

具体的にはsetTimeoutなどを利用して、一旦ブラウザに処理を渡してから2の処理を行なうようにすればよろしいのではないでしょうか。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
お礼遅くなりまして申し訳ございません。

JavaScriptのデバッグツールで、show()の箇所でブレークポイントを設定し一時止めておくと、希望の動きになることが確認できていたので、時間で処理内容が変わることに疑問がありました。
その為、setTimeoutも考えましたが、原因不明で不安でしたので質問させて頂きました。
結局、hashを使わず、cookieで画面番号を記憶するように変えて希望の動きにするようにしました。
No.2の方も別の方法をご回答頂いているので、ケースバイケースで対応することにします。

通報する

お礼日時：2013/02/18 19:39

No.2ベストアンサー

回答者： think49
回答日時：2013/02/01 18:58

ご希望の動作を実現するには CSS3 の :target や hashchange を使うのがスマートな気がします。

# 未対応ブラウザも動作対象とするならJavaScriptで工夫する必要があります。
http://jsfiddle.net/wxjzh/show/4/

> アドレスには一つ先の飛び先が表示されます。
原因は #1 の方が指摘されているようにページ遷移する前にhref属性値が書き換えられているためですね。
http://jsfiddle.net/wxjzh/show/1/

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
お礼遅くなりまして申し訳ございません。

サンプルまで付けて頂いてありがとうございます…が、両方同じコードなようです。
No.1のお礼でも書きましたが、今回は、hashを使わずcookieで処理をしてしまいましたが、別プロジェクトでhashChangeを利用してみました。
私のコードがおかしいのか、不安定な動きになることがあり今は断念。pushStateを導入するか否かというところです。

CSS3の:targetは始めて知りました。
便利ですが、できれば戻る・進むボタン対応も考慮したいので、hashChangeかpushStateのどちらかなというところです。
質問した時期のプロジェクトはiPadの対応のみで、かつWeb Clipで起動することを条件としていれば:targetで良かったかもしれません。

通報する

お礼日時：2013/02/18 20:14

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