Zmiana treści po kliknięciu guzika

Fake | 2018-07-01 17:44:55 UTC | #1

Witam,

Piszę stronę internetową i chciałbym na niej uzyskać efekt zmiany treści, czyli po kliknięciu w Przycisk1 w polu div pokaże się zdjęcie i treść 1 artykułu, po kliknięciu w Przycisk2 w tym samym polu div pokaże się inne zdjęcie i inny artykół / tekst itp. Jednak nie wiem jak taki efekt uzyskać i jakie języki zastosować, czy sam HTML i CSS wystarczy czy trzeba będzie jeszcze JS podpiąć ?


DBanaszewski | 2018-07-01 17:42:20 UTC | #2

[quote=”Fake, post:1, topic:7237”]
czy sam HTML i CSS wystarczy czy trzeba będzie jeszcze JS podpiąć ?
[/quote]

Tutaj będzie wymagany raczej JS :P


bopke | 2018-07-01 17:42:49 UTC | #3

W zasadzie jakby bardzo bardzo pokombinować to widziałem coś tego typu w html i css, ale to sztuka dla sztuki i nie działało na niektórych większych przeglądarkach. Znacznie prościej i sensowniej będzie zastosować JS :)


kacper | 2018-07-01 17:43:37 UTC | #4

Da się to zrobić samym CSS i HTML ale raczej nie będzie to zbyt piękne rozwiązanie :) Radzę użyć JS lub jakiegoś frameworka do tego typu Vue, React

edit: oczywiście zależy od skali twojego projektu i tego co robisz.


DBanaszewski | 2018-07-01 17:43:56 UTC | #5

<!DOCTYPE html>
<html>
<body>

<h2>Co potrafi JS?</h2>

<p id="demo">JS potrafi zmienić treść w bardzo prosty sposób.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Tak to wygląda"'>Zmień treść</button>

</body>
</html>

:)


Fake | 2018-07-01 17:48:22 UTC | #6

Projekt do dużych nie należy a strona będzie tymczasowa, póki nie stworzę strony na silniku typu webspell albo wordpress. Na frameworkach sie nie znam, nigdy z tego nei korzystałem, ogólnie od niedawna się tym bawię dlatego jeszcze jestem trochę zielony.


Fake | 2018-07-01 17:49:43 UTC | #7

Po tym kodzie widzę, że będzie dużo zabawy jeśli będę chciał umieścić kilka zdjęć w divie albo kilka akapitów


DBanaszewski | 2018-07-01 17:50:49 UTC | #8

Dla chcącego nic trudnego, można zrobić również przy pomocy JS i CSS (pierwszy div widoczny, a drugi div widoczny będzie po kliknięciu przycisku [a pierwszy zniknie])


Fake | 2018-07-01 17:58:17 UTC | #9

Możesz mi mniej więcej jakoś pokazać jak to ma wyglądać? JS dopiero się uczę i nie umiem jeszcze w pełni stosować go i implementować płynnie w kod


DBanaszewski | 2018-07-01 18:04:15 UTC | #10

Ten przycisk z osadzonym kodem możesz wkleić w sekcji body gdzie chcesz.

Jeżeli chcesz utworzyć plik JS, czyli kod przycisku wyodrębnić, nie ma problemu, wtedy tworzysz nowe funkcje.


system | 2018-08-02 18:09:40 UTC | #11

Ten temat został automatycznie zamknięty 32 dni po ostatnim wpisie. Tworzenie nowych odpowiedzi nie jest już możliwe.