リンクをクリックすると、ページのロードなしに画面が切り替わるようにしたいのですが、Javascript側でエラーとなり、問題がありましたというメッセージが出てしまいます。これはなぜでしょうか。htmlではなくxhtmlだからでしょうか?
ソースは以下のようになっています。回答よろしくお願いします。
<div class="gnavi"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="aboutservice.xhtml">概要</a></li> <li><a href="warning.xhtml">日本</a></li> <li><a href="old.xhtml"></a>ロシア</li> <li><a href="#">Export</a></li> </ul> <ul class="nav nav-sidebar"> <li><a href="">Nav item</a></li> <li><a href="">Nav item again</a></li> <li><a href="">One more nav</a></li> <li><a href="">Another nav item</a></li> <li><a href="">More navigation</a></li> </ul> <ul class="nav nav-sidebar"> <li><a href="">Nav item again</a></li> <li><a href="">One more nav</a></li> <li><a href="">Another nav item</a></li> </ul> </div> </div> <div class="pageDisplay"> </div> <script src="resources/js/pagemove.js"></script> <script src="resources/js/jquery-1.11.1.min.js"></script> <script src="bootstrap/js/bootstrap.js"></script>
$(function () { //ページを表示させる箇所の設定 var $content = $('.pageDisplay'); //ボタンをクリックした時の処理 $(document).on('click', '.gnavi a', function (event) { event.preventDefault(); //.gnavi aのhrefにあるリンク先を保存 var link = $(this).attr("href"); //リンク先が今と同じであれば遷移しない if (link === lastpage) { return false; } else { $content.fadeOut(600, function () { getPage(link); }); //今のリンク先を保存 lastpage = link; } }); //初期設定 getPage("aboutservice.xhtml"); var lastpage = "aboutservice.xhtml"; //ページを取得してくる function getPage(elm) { $.ajax({ type: 'GET', url: elm, dataType: 'xhtml', success: function (data) { $content.xhtml(data).fadeIn(600); }, error: function () { alert('問題がありました。'); } }); } });
回答1件
あなたの回答
tips
プレビュー