У меня есть код, который несколько лет работал нормально go, но больше не работает. Я надеюсь, что кто-то может объяснить мою ошибку (ы). Я проследил несколько других потоков в Stackoverflow и увидел несколько страниц на сайте jQuery, в которых предлагалось, что функция load () устарела, но я также видел утверждения об обратном.
Я при попытке создать одну страницу с каждым из трех элементов div загружается страница, новая для каждого из них каждый раз, когда кто-то нажимает на кнопку меню.
Вот код.
rd c
<html>
<head>
<title>Page Title Here</title>
<link rel="stylesheet" media="all" href="css/style.css" style type="text/css">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Playfair+Display+SC' rel='stylesheet' type='text/css'>
<script src="js/jquery-3.4.0.js"></script>
<script>
$(document).ready(function() {
$(".titlepage").click(function(){
$("#poem").load("books/TitlePage.html", function(){
$("#comments").load("comments/commtp.html", function(){
$("#notes").load("notes/notesOvrView.html");
});
});
});
$(".prelim").click(function(){
$("#poem").load("books/prelim.html", function(){
$("#comments").load("comments/commPrelim.html", function(){
$("#notes").load("notes/notesPrelim.html");
});
});
});
$(".book1").click(function(){
$("#poem").load("books/book1.html", function(){
$("#comments").load("comments/comm1.html", function(){
$("#notes").load("notes/notes1.html");
});
});
});
$(".book2").click(function(){
$("#poem").load("books/book2.html", function(){
$("#comments").load("comments/comm2.html", function(){
$("#notes").load("notes/notes2.html");
});
});
});
$(".book3").click(function(){
$("#poem").load("books/book3.html", function(){
$("#comments").load("comments/comm3.html", function(){
$("#notes").load("notes/notes3.html");
});
});
});
$(".book4").click(function(){
$("#poem").load("books/book4.html", function(){
$("#comments").load("comments/comm4.html", function(){
$("#notes").load("notes/notes4.html");
});
});
});
$(".book5").click(function(){
$("#poem").load("books/book5.html", function(){
$("#comments").load("comments/comm5.html", function(){
$("#notes").load("notes/notes5.html");
});
});
});
$(".book6").click(function(){
$("#poem").load("books/book6.html", function(){
$("#comments").load("comments/comm6.html", function(){
$("#notes").load("notes/notes6.html");
});
});
});
$(".book7").click(function(){
$("#poem").load("books/book7.html", function(){
$("#comments").load("comments/comm7.html", function(){
$("#notes").load("notes/notes7.html");
});
});
});
$(".book8").click(function(){
$("#poem").load("books/book8.html", function(){
$("#comments").load("comments/comm8.html", function(){
$("#notes").load("notes/notes8.html");
});
});
});
$(".book9").click(function(){
$("#poem").load("books/book9.html", function(){
$("#comments").load("comments/comm9.html", function(){
$("#notes").load("notes/notes9.html");
});
});
});
$(".book10").click(function(){
$("#poem").load("books/book10.html", function(){
$("#comments").load("comments/comm10.html", function(){
$("#notes").load("notes/notes10.html");
});
});
});
$(".book11").click(function(){
$("#poem").load("books/book11.html", function(){
$("#comments").load("comments/comm11.html", function(){
$("#notes").load("notes/notes11.html");
});
});
});
$(".book12").click(function(){
$("#poem").load("books/book12.html", function(){
$("#comments").load("comments/comm12.html", function(){
$("#notes").load("notes/notes12.html");
});
});
});
});//end document ready
</script>
</head>
<body>
<div id="notes">
<div class="inner">
<h3>Content on Opening here</h3>
<p> </p>
<h3>More Content</h3>
<p> </p>
<p></p>
<p></p>
<p></p>
<p></p>
<p class="hi">Still more content for opening.</p>
</div> <!--End of div "inner" -->
</div> <!-- END div id "notes" -->
<div id="poem">
<div class="inner">
<h3 class="tp">A Title Here</h3>
<p class="tp">Sub-heading</p>
<p class="tp">Content</p>
<p class="tp">To be seen upon arrival.</p>
<p> </p>
<p> </p>
</div> <!-- END div class inner -->
</div> <!-- END div id "poem" -->
<div id="comments">
<div class="inner">
<h3>Anothr div here</h3>
<p class="small">With</p>
<p>some content.</p>
<p></p>
</div> <!-- END div class "inner"-->
</div> <!-- END div id "comments"-->
<div id="head">Title
<span class="font1">Sub-title</span>
<span class="font2">by the author</span>
<span class="font3">Named here</span>
</div><!-- END div id "head" -->
<div id="foot">
<div class="floating-menu">
<h3>Books:</h3>
<input type="button" class="titlepage" value="Home" />
<input type="button" class="prelim" value="Preliminaries" />
<input type="button" class="book1" value="Book I" />
<input type="button" class="book2" value="Book II" />
<input type="button" class="book3" value="Book III"/>
<input type="button" class="book4" value="Book IV" />
<input type="button" class="book5" value="Book V" />
<input type="button" class="book6" value="Book VI"/>
<input type="button" class="book7" value="Book VII" />
<input type="button" class="book8" value="Book VIII" />
<input type="button" class="book9" value="Book IX"/>
<input type="button" class="book10" value="Book X" />
<input type="button" class="book11" value="Book XI" />
<input type="button" class="book12" value="Book XII"/>
</div>
</div><!-- END div id "foot" -->
</body>
</html>`