$(function(){ //ページを表示させる箇所の設定 var $content = $('.pageDisplay### pageDisplay'); //ボタンをクリックした時の処理 $(document).on('click', '.menu a',function(event) { event.preventDefault(); //.menu aのhrefにあるリンク先を保存 var link = $(this).attr("href"); //リンク先が今と同じであれば遷移しない if(link == lastpage){ return false; }else{ $content.fadeOut(600, function() { getPage(link); }); //今のリンク先を保存 lastpage = link; } }); //初期設定 getPage("home.html"); var lastpage = "home.html"; //ページを取得してくる function getPage(elm){ $.ajax({ type: 'GET', url: elm, dataType: 'html', success: function(data){ $content.html(data).fadeIn(600); }, error:function() { alert('問題がありました。'); } }); } }); **HTML** <div id="select"> <ul class="menu"> <li><a href="home.html">ホーム</a></li> <li ><a href="linkA.html">リンク先</a></li> </ul> </div> <main id="contents"> <div class="pageDisplay"> </div> </body> </html> **linkA.html** <a href= linkB.html><img></a>
linkB.html
<h1>テキスト</h1> **質問内容** css gridレイアウトをしており、div=id=contentsの箇所へclass=pageDisplay(ajaxで読み込みのhtml表示先)があります。 そこからアンカーリンクでさらに別のhtmlへリンクさせる際に、 リンク先を同じ場所に表示させる方法を教えて下さい! ➡全く新しい全体ページとしてリンク先が表示されてしまいます。追記6/311:00
HTMLでid=selectからリンク先は、css gridでmainと名付けた範囲に表示されます。
そのmain以外の範囲以外は非同期のままにしています。
サイト➡https://sterfield.co.jp/designer/別のページをjqueryのajaxを使って読み込み表示させる/
を参考にコピペしました。
また、success等非推奨とのことで、doneに変える場合を教えていただきたく宜しくお願いします。
初期ページは、homeです。
宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー