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>
No.2ベストアンサー
- 回答日時:
ご希望の動作を実現するには CSS3 の :target や hashchange を使うのがスマートな気がします。
# 未対応ブラウザも動作対象とするならJavaScriptで工夫する必要があります。
http://jsfiddle.net/wxjzh/show/4/
> アドレスには一つ先の飛び先が表示されます。
原因は #1 の方が指摘されているようにページ遷移する前にhref属性値が書き換えられているためですね。
http://jsfiddle.net/wxjzh/show/1/
ご回答ありがとうございます。
お礼遅くなりまして申し訳ございません。
サンプルまで付けて頂いてありがとうございます…が、両方同じコードなようです。
No.1のお礼でも書きましたが、今回は、hashを使わずcookieで処理をしてしまいましたが、別プロジェクトでhashChangeを利用してみました。
私のコードがおかしいのか、不安定な動きになることがあり今は断念。pushStateを導入するか否かというところです。
CSS3の:targetは始めて知りました。
便利ですが、できれば戻る・進むボタン対応も考慮したいので、hashChangeかpushStateのどちらかなというところです。
質問した時期のプロジェクトはiPadの対応のみで、かつWeb Clipで起動することを条件としていれば:targetで良かったかもしれません。
No.1
- 回答日時:
推測での回答ですが…
クリックした時に以下の処理が起こっていると推測します。
1.リンク要素をユーザがクリック
2.スクリプトが表示処理とhref属性変更処理を行なう
3.ブラウザ側がクリック時の通常処理を行なう
(2で変えられた#step2を表示し、アドレスバーにそのURIを表示)
3の処理の際に、#step2の要素は非表示設定になっているため、結果的に、アドレスバーの表示だけが変わることになっているのではないkと推測します。
お考えのようになさりたいのであれば、
2.の処理ではhrefの変更を行なわず
3.の処理をブラウザに行なわせた後で
2.の後半の処理(または2全体の処理)を行なう
ように順序を変えればよろしいかと思います。
具体的にはsetTimeoutなどを利用して、一旦ブラウザに処理を渡してから2の処理を行なうようにすればよろしいのではないでしょうか。
ご回答ありがとうございます。
お礼遅くなりまして申し訳ございません。
JavaScriptのデバッグツールで、show()の箇所でブレークポイントを設定し一時止めておくと、希望の動きになることが確認できていたので、時間で処理内容が変わることに疑問がありました。
その為、setTimeoutも考えましたが、原因不明で不安でしたので質問させて頂きました。
結局、hashを使わず、cookieで画面番号を記憶するように変えて希望の動きにするようにしました。
No.2の方も別の方法をご回答頂いているので、ケースバイケースで対応することにします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アコーディオンメニューをアン...
-
重たい処理のタイムアウト強制終了
-
JavaScriptからJAVAクラスを呼...
-
ExcelVBA で文字列の特定の文字...
-
jQueryの処理順序について
-
ツリー型 多階層メニューでの...
-
数値の定数を付ける時
-
tryの終了
-
Tomcat高負荷時の設定について
-
C#の処理をリアルタイムに表示...
-
JSP、サーブレットの初期処理
-
再度、スレッドが実行中かどう...
-
SwingUtilities.invokeLater(ne...
-
処理実行後、終了させないで最...
-
jQueryでdiv作成後まで待ってか...
-
「タイプ初期化子が例外をスロ...
-
エクセルVBAで、条件に一致する...
-
配列の重複する値とその個数を...
-
複数の変数を宣言する時、同時...
-
オブジェクト参照がオブジェク...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tryの終了
-
Javaでのデバッグコード削除
-
Tomcat高負荷時の設定について
-
JavaScriptからJAVAクラスを呼...
-
[Java] while(true)の意味
-
数値の定数を付ける時
-
ラジオボタンの選択判定
-
JSP、サーブレットの初期処理
-
JavaでVBのDOEVENTSと同様の処...
-
JAVAからJAVASCRIPT関数を呼び出し
-
doGetとdoPostの違い
-
Delphiのマルチスレッドの割り...
-
C#で別スレッドの終了を知りたい
-
SwingUtilities.invokeLater(ne...
-
FocusLostでイベント処理を中断...
-
onBlurとonFocusの処理順序につ...
-
アコーディオンメニューをアン...
-
JAVAにおける画像のJPEG保存の...
-
Tomcatのスレッドを破棄する方法
-
C#でバックグラウンド処理から...
おすすめ情報