zmiana tresci diva po kliknieciu w innego diva obslugujacego menu

Cześć, jestem zielony jeśli chodzi o obsługę js. Mam prostą stronkę (w pliku index.php) z menu i divem zawierającym treść strony. Chciałbym, żeby po kliknięciu w diva z menu podmienić treść innego diva z treścią strony. Domyślam się, że potrzebuję bibliotekę jquery i pewnie funkcję ajax. Divem z treścią strony będzie docelowo zapytanie do bazy danych, ale to potem. Chciałbym zrobić to etapami. Jak się do tego zabrać? Mógłby ktoś pokazać (możliwie jak najprostszy) przykładowy kod z komentarzem jak to miałoby wyglądać? Proszę o wyrozumiałość :)

haracz napisał(a):

Cześć, jestem zielony jeśli chodzi o obsługę js.

Chyba o obsługę DOM'u?

Mam prostą stronkę (w pliku index.php) z menu i divem zawierającym treść strony. Chciałbym, żeby po kliknięciu w diva z menu podmienić treść innego diva z treścią strony. Domyślam się, że potrzebuję bibliotekę jquery i pewnie funkcję ajax.

jQuery na pewno nie; a to czy AJAX czy nie, to zależy czy ta treść miałaby być brana z servera czy z klienta. Jesli z klienta, to nie.

Divem z treścią strony będzie docelowo zapytanie do bazy danych, ale to potem. Chciałbym zrobić to etapami. Jak się do tego zabrać? Mógłby ktoś pokazać (możliwie jak najprostszy) przykładowy kod z komentarzem jak to miałoby wyglądać? Proszę o wyrozumiałość :)

Czyli można rozumieć, że chodzi Ci o to żeby dało się korzystać z różnych podstron bez przeładowania całej strony?

Bo jeśli tak, to masz kilka sposobów:

1. Możesz wyrenderować w swoim index.php wszystkie divy jakie móglbyś chcieć pokazać, a potem przy pomocy JavaScript chować i pokazywać inne.
2. Mógłbyś zrobić tak jak mówisz; czyli jak ktoś kliknie w menu, to będzie trzeba doładować AJAX'em treść, ale to wydaje się średnim pomysłem, trudnym do zrobienia, zależnym od wielu czynników; plus i tak trzebaby czekać na wczytanie.
3. Zamiast pisać HTML'a, mógłbyś użyć JavaScript w całości do zbudowania domu. Czyli zamiast w PHP pisać echo "<p>welcome</p>";, mógłbyś stworzyć taki element w JavaScript document.createElement("P").innerText = 'welcome';.

Do ostatniego możesz użyć jednej z gotowych bibliotek, np Angular, React lub Vue; które działają na dokładnie takiej zadadzie, tylko że abstrakcują to co robią w składnie podobna do HTML'a, np Angularowy template, Reactowy JSX czy Component Template od Vue.

Ja bym Ci zaproponował punkt 1. jeśli jesteś początkujący i chcesz się uczyć; punkt 3. jeśli chcesz od razu wyciągnąć kobyłę; punkt 2. bym odradzał.