location.hashの遷移
- jQueryを使ってウィザード形式の画面を作る方法について説明します。
- 次のリンクをクリックすると、画面が切り替わります。
- しかし、実行するとアドレスには一つ先の飛び先が表示されてしまいます。どうすれば解決できるでしょうか？
- ベストアンサー
location.hashの遷移
jQueryを使ってウィザード形式の画面を作ろうとしております。 「次へ」のリンクは画面に一つだけ設置し、動的にリンク先のハッシュを変えるようにし、 画面は、リンク先のIDボックスを表示するという仕組みです。 しかし、以下のコードで実行すると、画面は指定したものが表示されますが、アドレスには一つ先の飛び先が表示されます。 この現象が、どういうことかわかりませんので、どなたか教えて頂けないでしょうか？ <!DOCTYPE html> <html><head><meta charset="utf-8" /><script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> <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>
- hiro_033
- お礼率77% (17/22)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ご希望の動作を実現するには CSS3 の :target や hashchange を使うのがスマートな気がします。 # 未対応ブラウザも動作対象とするならJavaScriptで工夫する必要があります。 http://jsfiddle.net/wxjzh/show/4/ > アドレスには一つ先の飛び先が表示されます。 原因は #1 の方が指摘されているようにページ遷移する前にhref属性値が書き換えられているためですね。 http://jsfiddle.net/wxjzh/show/1/
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
推測での回答ですが… クリックした時に以下の処理が起こっていると推測します。 1.リンク要素をユーザがクリック 2.スクリプトが表示処理とhref属性変更処理を行なう 3.ブラウザ側がクリック時の通常処理を行なう （2で変えられた#step2を表示し、アドレスバーにそのURIを表示） 3の処理の際に、#step2の要素は非表示設定になっているため、結果的に、アドレスバーの表示だけが変わることになっているのではないｋと推測します。 お考えのようになさりたいのであれば、 2.の処理ではhrefの変更を行なわず 3.の処理をブラウザに行なわせた後で 2.の後半の処理（または2全体の処理）を行なう ように順序を変えればよろしいかと思います。 具体的にはsetTimeoutなどを利用して、一旦ブラウザに処理を渡してから2の処理を行なうようにすればよろしいのではないでしょうか。
お礼
ご回答ありがとうございます。 お礼遅くなりまして申し訳ございません。 JavaScriptのデバッグツールで、show()の箇所でブレークポイントを設定し一時止めておくと、希望の動きになることが確認できていたので、時間で処理内容が変わることに疑問がありました。 その為、setTimeoutも考えましたが、原因不明で不安でしたので質問させて頂きました。 結局、hashを使わず、cookieで画面番号を記憶するように変えて希望の動きにするようにしました。 No.2の方も別の方法をご回答頂いているので、ケースバイケースで対応することにします。
関連するQ&A
- ｊQueryでの画像のフェードインのループ
ｊQuery初心者です。 jQueryで３枚の背景画像がフェードインで切り替わり、ループするようにしたいのですが、 下記のように書いてみたのですが、１週ループまでは上手くいくのですが、２週目に２枚目の画像で止まってしまいます。 下記だと何故２週目の２枚目で止まるのか？の原因と、スマートな書き方をご教授頂けませんか？ <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <script> $(function() { $("div.fadein_1").fadeIn(1000); setInterval(function(){ $("div.fadein_2").delay(4000).fadeIn(1000, function(){ $("div.fadein_3").delay(4000).fadeIn(1000, function(){ $("div.fadein_2").attr('style', 'display:none;'); $("div.fadein_3").fadeOut(1000, function(){ clearQueue(); }); }); }); }, 0); }); </script> <div class="fade"> <div class="fadein_1" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_2" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_3" style="display:none;"></div> </div>
- ベストアンサー
- JavaScript
- jquerymobileのページ遷移のような遷移
いつもお世話になっております。 jquerymobileのページ遷移のような遷移を行いたいのですが、 イメージ（スライドはしなくても可） URL：http://billboardtop100.net/jquery_mobile/slide/slide.html 流れとしては、ページローディングしている最中、画面がオーバーレイしながら、 ローディングのアニメーション画像を表示し、 ロードが完了したら、スライドしてURL先へリンクする というイメージなのですが（スライドはしなくても可） ajaxとかそういう技術を使わないと、スムーズに遷移しないのでしょうか、、 以下に作ってみたサンプルを記載しますが、 単純にオーバーレイしてからリンク先へアクセスしているので、 読み込みも遅くなりますし、以下のコードだと、ロードの画像が真ん中にきません、、 そして画像を隠す動作が一瞬ちらついてしまいます、、、 html <div id="shade"><img src="/img/ajax-loader.gif" alt="ローディング中"></div> <section data-role="content"> <ul data-role="listview"> <li><a href="/aboutus.html" data-transition="slide">hoge</a></li> <li><a href="sample.html" data-transition="slide">hoge2</a></li> <li><a href="sample.html" data-transition="slide">hoge3</a></li> </ul> </section> js jQuery(function(jQuery){ jQuery("#shade").css({ opacity: '0.6', display: 'none', position: 'absolute', top: '0', width: '100%', height: '100%', background: '#000', zIndex: '1' }); jQuery("a[href]").click(function(e){ link = jQuery(this).attr("href"); if (!link.match(/#/i)) { e.preventDefault(); jQuery("#shade").css('display', 'block'); } }); }); カッコいいページ遷移がしたいです。。 是非ご教授下さい。 どうぞよろしくお願いします
- 締切済み
- JavaScript
- javascriptについて教えてください。
divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id; alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryでdivごとリンクする際の開き方の指定
jQueryでdivごとリンクする際に 新しいウィンドウで開くものと、同じウィンドウで開くものを分けたいのです。 下にコードを載せています。 素人なりにおかしいかと思っている点は、 同じfunction()を続けて使っているところです。 2つのスクリプトをそれぞれ1つだけ書いた時はうまく動作します。 どのように書いたらよいでしょうか？ よろしくお願いいたします。 ●新しいウィンドウで開きたいdiv要素 aaa,bbb,ccc ●同じウインドウで開きたいdiv要素 ddd,eee ------------------------------------------- <script type="text/javascript"> $(function(){ $(".aaa,.bbb,.ccc").click(function(){ window.open ( $(this).find('a').attr('href'), 'newwin' ); return false; }); }); </script> <script type="text/javascript"> $(function(){ $(".ddd,.eee").click(function(){ window.open ( $(this).find('a').attr('href'); return false; }); }); </script> -------------------------------------------
- ベストアンサー
- JavaScript
- jQueryで追加した要素がマウスホバーに反応しない
jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div><!-- id="sortable" --> </body> </html>
- ベストアンサー
- JavaScript
- Jquery タブで、４つのliのうち、ひとつだけ除外
お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
- シャドウボックスとjQueryを共存させるには
シャドウボックス3.0.3を利用しています。 チェックボックスを複数選択するjQueryをシャドウボックス内で利用したいのですが、 シャドウボックスとjQueryがコンフリクトしてしまうようで、実現できません。 共存させるにはどのように記述を変えれば良いでしょうか？ <head> <script type="text/javascript" src="../common/js/jquery-1.3.1.min.js"></script> <!-- シャドウボックス --> <script type="text/javascript" src="../common/js/shadowbox/shadowbox.js"></script> <link rel="stylesheet" type="text/css" href="../common/js/shadowbox/shadowbox.css"> <script type="text/javascript"> $(document).ready(function(){ Shadowbox.init(); }); </script> <!-- チェックボックスの複数選択 --> <script type="text/javascript"> $(function(){ $("#toggle").click(function(){ $('.chkbox').attr('checked', $(this).attr('checked')); }); }); </script> </head> <body> <a href="#inline" title="シャドウボックス" rel="shadowbox;width=900;height=1200">シャドウボックス</a> <div id="inline" style="display:none"> <input type="checkbox" id="toggle"> toggle<br> <br> <input class="chkbox" type="checkbox" name="ids[]" value="1"> 1<br> <input class="chkbox" type="checkbox" name="ids[]" value="2"> 2<br> <input class="chkbox" type="checkbox" name="ids[]" value="3"> 3<br> </div> </body>
- ベストアンサー
- JavaScript
- ロゴがブルブルしない・・・
参照サイトを参考に埋め込みましたが上手く起動しません。 参照：http://webimemo.com/jquery/1548 ヘッダー部分は下記です。 <!-- ブルブル --> <script type="text/javascript" src="http://pimpkidz.com/wp/wp-includes/js/jquery.js"></script> <script type="text/javascript" src="http://pimpkidz.com/wp/wp-includes/js/jrumble.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#logo').jrumble(); }); </script> BODY部分は <div class="header_logo"> <h1 id="logo"><a href="http://pimpkidz.com/"><img src="http://pimpkidz.com/wp/wp-content/uploads/2011/08/pimplogo.jpg" alt="アメブロ WordPress ワードプレス カスタマイズ SEO 対策 初心者" /></a></h1> <div class="new_navigation1"><ul id="new_navigation"> <li><a href="?page_id=248" title="お問い合わせ" class="topics">お問い合わせ</a></li> <li><a href="?page_id=972" title="リンク集" class="policy">リンク集</a></li> <li><a href="http://feeds.feedburner.com/Pimpkidz" title="RSS" class="outline">RSS</a></li> </ul> </div></div> </div> 上の通りに埋め込みましたが駄目でした。 どこがだめなのでしょうか？ 宜しくお願いします。 自分のサイト：http://pimpkidz.com/
- ベストアンサー
- JavaScript
- jQueryタブメニュー内へのリンク方法。
javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内（tab1～tab3）へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryのフェードイン・アウト効果について
いつもお世話になります。 jQueryを使いタブメニューに画像ボタンを使って内容の切り替えをし、切り替え時にフェードイン・アウトの効果を出したいと思います。 以下がソースです。 <!-- html --> <div id="wrapper"> <ul id="tabMenu"> <li class="tab_a"><img src="tab1.png"/ ></li> <li class="tab_b"><img src="tab2_2.png" /></li> <li class="tab_c"><img src="tab3_2.png" /></li> </ul> <div id="tab_a"> tab_aの内容 </div> <div id="tab_b"> tab_bの内容 </div> <div id="tab_c"> tab_cの内容 </div> </div> <!-- jQuery --> var img_dir = "http://www.hogehoge.com/images/"; jQuery(function(){ // tab_aボタンをクリックした時の処理 jQuery(".tab_a").click(function(){ jQuery("#tab_a").css("display", "block"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_bボタンをクリックした時の処理 jQuery(".tab_b").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "block"), jQuery("#tab_c").css("display", "none"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3_2.png"), }); // tab_cボタンをクリックした時の処理 jQuery(".tab_c").click(function(){ jQuery("#tab_a").css("display", "none"), jQuery("#tab_b").css("display", "none"), jQuery("#tab_c").css("display", "block"), jQuery(".tab_a img").attr("src", img_dir + "tab1_2.png"), jQuery(".tab_b img").attr("src", img_dir + "tab2_2.png"), jQuery(".tab_c img").attr("src", img_dir + "tab3.png"), }); }); 上記のコードでタブの切り替えは出来ましたが、ここからどう追記すれば切り替え時にフェード効果を付けれるのか分かりません。 やり方を検索し調べてはいるものの、解決に至らないので相談させていただきました。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 お礼遅くなりまして申し訳ございません。 サンプルまで付けて頂いてありがとうございます…が、両方同じコードなようです。 No.1のお礼でも書きましたが、今回は、hashを使わずcookieで処理をしてしまいましたが、別プロジェクトでhashChangeを利用してみました。 私のコードがおかしいのか、不安定な動きになることがあり今は断念。pushStateを導入するか否かというところです。 CSS3の:targetは始めて知りました。 便利ですが、できれば戻る・進むボタン対応も考慮したいので、hashChangeかpushStateのどちらかなというところです。 質問した時期のプロジェクトはiPadの対応のみで、かつWeb Clipで起動することを条件としていれば:targetで良かったかもしれません。