Как заменять блок div.content на главное странице блоком div.content из другого .html файла?

Question

[Wh01am]

Мне нужно изменить содержимое div.content на главной странице inxex.html при нажатии на ссылку. Например, у меня есть 5 ссылок(view1, view2, view3, view4 и view5). Эти 5 ссылок указывают на 5 html файлов view1.html, view2.html, view3.html, view4.html и view5.html, которые содержат примерно одинаковое содержимое в каждом из этих файлов.

Когда я нажимаю на ссылку view1, мне нужно загрузить содержимое div.content из страницы view1.html в div.content главной страницы index.html. (Динамически загружается без изменения другого содержимого страницы), и при нажатии остальных кнопок в div.content главной страницы должно быть загружено содержимое из других .html документов. Как я могу это сделать?

Хочу это сделать с помощью Ajax, но только начал с ним знакомиться и не совсем догоняю как это реализовать. Помогите пожалуйста.

Comments

[posters]

Выучите Vue

Answer 1

[Aetae]

$('.list > a').click(function(event) {
  event.preventDefault(); // останавливаем переход по ссылке
  $('.content').load( $(this).attr('href') );
})

Comments

[Aetae]

Александр,

event.preventDefault() без особой необходимости лучше лишний раз не использовать.

Почему? 0_о

Ну и ты, надеюсь, знаешь, что тут return false работает только потому, что jQuery вызывает event.preventDefault(); под капотом?

[Дмитрий]

Александр, preventDefault - предотвращает поведение по умолчанию. Что является логичным и эстетичным решение! return false - предотвращает поведение по умолчанию и распространение DOM событий. Что совершенно нелогично!
Мб. что-то, что я упустил? Или просто раздаете плохие советы?

Ну и ты, надеюсь, знаешь, что тут return false работает только потому, что jQuery вызывает event.preventDefault(); под капотом?

Aetae, Раунд! :D

[Wh01am]

Александр, Дмитрий, Aetae, все получилось, но появилось несколько проблем.

1. При загрузке контента не закрывается меню и не меняется его значение, на то какая опция выбрана.
   Можно ли это как-то исправить?
   
2. Когда впервые загружаю главную страницу(index.html) и в меню выбираю пункт с ссылкой на index.html получается так, что она открывается сама в себе. Как это можно пофиксить?
   

[Wh01am]

Александр, Дмитрий, Aetae, вторую проблему я исправил добавив к пункту с ссылкой на index.html класс и добавил его в скрипт .not('[class]'). Можно ли это как-то по другому сделать, чтобы страница не перезагружалась?

Answer 2

[TheOnlyFastCoder2]

Используйте LocalStorage , т.е вам нужно загружать свои данные и выгружать (Удалять) на свои страницы .
Так вы можете жонглировать своими данными между вашими страницами .
А так советую вам использовать nuxt для Vue шикарный framework . Или nextJS или nestJS для react или angular