Вопрос:
Я хочу загрузить html файл в div нажатием кнопки. Когда я нажимаю кнопку “Создать”, он должен загрузить файл “createarray.html” в div tabcontent.
Это мой html файл:
<div class=»tab»> <button class=»tablinks» onclick=»createarray.html» id= «defaultOpen»>Creation</button> <button class=»tablinks» onclick=»insertarray.html»>Insertion</button> <button class=»tablinks» onclick=»deletearray.html»>Deletion</button> </div> <div id=»Create» class=»tabcontent»> </div> <div id=»Insert» class=»tabcontent»> </div> <div id=»delete» class=»tabcontent»> </div>
Это мой java-скрипт:
$.ajax({ url : «createarray.html», dataType: «html», success : function (data) { $(«#create»).html(data); } }); $.ajax({ url : «insertarray.html», dataType: «html», success : function (data) { $(«#insert»).html(data); } }); $.ajax({ url : «deletearray.html», dataType: «html», success : function (data) { $(«#delete»).html(data); } });
Может кто-нибудь, пожалуйста, помогите мне с этим, пожалуйста?
Ответ №1
Вместо запроса ajax вы можете использовать метод load jQuery. Здесь ссылка на документацию.
Образец кода
<button class=»tablinks» data-url=»insertarray.html» data-target=»create»>Insertion</button> $(function(){ $(«.tablinks»).click(function(){ var url = $(this).attr(«data-url»); var target = «#» + $(this).attr(«data-target»); $(target).load(url); }); }); Ответ №2
Html:
<div class=»tab»> <button class=»tablinks» onclick=»createarray()» id= «defaultOpen»>Creation</button> <button class=»tablinks» onclick=»insertarray()»>Insertion</button> <button class=»tablinks» onclick=»deletearray()»>Deletion</button> </div> <div id=»create» class=»tabcontent»> </div> <div id=»insert» class=»tabcontent»> </div> <div id=»delete» class=»tabcontent»> </div>
Javascript:
function createarray(){ $.ajax({ url : «createarray.html», success : function (data) { $(«#create»).html(data); } }); } function insertarray(){ $.ajax({ url : «insertarray.html», success : function (data) { $(«#insert»).html(data); } }); } function deletearray(){ $.ajax({ url : «deletearray.html», success : function (data) { $(«#delete»).html(data); } }); } Ответ №3
Атрибут onclick принимает Javascript – onclick=»createarray.html» т.д. onclick=»createarray.html». Я предполагаю, что вы хотите загрузить свой HTML, когда будут нажаты эти кнопки. Ваш Javascript также немного повторяется, поэтому мы могли бы использовать его как функцию:
function loadHtml(file){ $.ajax({ url : file+»array.html», dataType: «html», success : function (data) { $(«#»+file).html(data); } }); }
Мы можем сделать это лучше. Он в основном реплицирует метод загрузки jQuery, поэтому вы можете использовать это вместо этого:
function loadHtml(file){ $(«#» + file).load(file + «array.html»); }
Который вы тогда вызывали бы из вашего атрибута onclick следующим образом:
<button class=»tablinks» onclick=»loadHtml(‘create’)» id= «defaultOpen»>Creation</button> <button class=»tablinks» onclick=»loadHtml(‘insert’)»>Insertion</button> <button class=»tablinks» onclick=»loadHtml(‘delete’)»>Deletion</button> Ответ №4
Во-первых, использование onclick будет приводить к ошибкам, поскольку ожидается, что содержимое будет действительным JS-кодом.
Для достижения того, что вам нужно, вы можете использовать ненавязчивый обработчик событий на элементах button вместе с атрибутами data для хранения своих пользовательских данных. В обработчике событий вы можете load() требуемый контент в заданную цель. Попробуй это:
<button type=»button» class=»tablinks defaultOpen» data-url=»createarray.html» data-target=»#create»>Creation</button> <button type=»button» class=»tablinks» data-url=»insertarray.html» data-target=»#insert»>Insertion</button> <button type=»button» class=»tablinks» data-url=»deletearray.html» data-target=»#delete»>Deletion</button> $(function() { $(‘.tablinks’).click(function() { var target = $(this).data(‘target’); $(target).load($(this).data(‘url’)); }); });
Обратите внимание, что я исправил defaultOpen для класса, поскольку он имеет больше смысла семантически.
Ответ №5$(document).ready(function(){ $(«#idOfWhereYouClick»).click(function(){ $(«#idOfDivWhereYouWantToLoad»).load(«yourPage.html»); });
