• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmiana treści Diva za pomocą JavaScript bez ponownego ładowania strony

VPS Starter Arubacloud
+2 głosów
6,612 wizyt
pytanie zadane 8 lipca 2015 w JavaScript przez Maciej Gzela Nowicjusz (140 p.)

Witajcie

Mam problem. Otóż chcę zrobić stronę, która, wiadomo, posiada menu u góry, po bokach reklamy, a w środku główny div z tekstem. Chciałbym, by po kliknięciu odpowiedniej opcji w menu zawartość owego głównego diva zmieniała się na taką jaką podam. Menu jest zrobione wg. tego co Pan Mirosław omawiał w 3 odcinku poradnika CSS.

I tutaj rodzą się moje pytania:

  • W jaki sposób dodać do tego menu zdarzenie Onclick, by po jego kliknięciu odpowiednia funkcja podmieniła zawartość głównego diva?
  • Jak skonstruować taką funkcję, by móc wstawiać zdjęcia i ogólnie w miarę skomplikowaną zawartość?

Z góry dziękuję za odpowiedź

Maciej

3 odpowiedzi

+1 głos
odpowiedź 8 lipca 2015 przez Comandeer Guru (599,730 p.)
https://github.com/defunkt/jquery-pjax → History API jest jedynym w pełni przyjaznym userowi sposobem na to. Pod maską korzysta z http://api.jquery.com/load
komentarz 8 lipca 2015 przez Czort Nałogowiec (32,500 p.)
Sam load() wystarczy jeśli nie zależy na tym żeby można było dodawać podstrony do zakładek albo używać przycisku wstecz w przeglądarce. Dla większości stron jest to jednak niezbędne.
komentarz 8 lipca 2015 przez Comandeer Guru (599,730 p.)
A czemu jest to niezbędne, to można zerknąć tutaj: https://pornel.net/ramki
komentarz 8 lipca 2015 przez Maciej Gzela Nowicjusz (140 p.)
No dobra. Czyli wychodzi na to że lepiej żebym zrobił po prostu osobną podstronę. W takim razie muszę z każdą podstroną tworzyć od początku wszystko? Czy jest jakiś lepszy sposób?-
komentarz 9 lipca 2015 przez Tomatosoup Pasjonat (18,530 p.)
"Skakanie" pornela w sombrero wciąga bardziej niż sam content strony
komentarz 9 lipca 2015 przez Comandeer Guru (599,730 p.)
Haha, dokładnie :D
0 głosów
odpowiedź 8 lipca 2015 przez hypothermi Obywatel (1,170 p.)
Czyli chodzi Ci po prostu o stworzenie strony typu Single Page? Jak na przykład tutaj:

http://angular-ui.github.io/ui-router/site/

Jeżeli tak to np. Angular (albo React, Backbone itp.) bardzo ułatwi sprawę i w sumie te frameworki do tego służą.
komentarz 9 lipca 2015 przez Comandeer Guru (599,730 p.)
React i Angular na pewno sprawy nie ułatwią, bo jeden to przekombinowany system widoków, a drugi to źle zaprojektowany framework. Już bym szybciej został z Backbone'em - tylko po co, skoro do takiej stronki starczy zwykłe History API.
0 głosów
odpowiedź 9 lipca 2015 przez L3t94 Użytkownik (900 p.)

Z tym samym mam problem, znalazłem rozwiązanie ale jest nie praktyczne. Wrzucę do nauki.
 

   function ontop(id)

    {

      document.getElementById('1').style.zIndex = 0;

      document.getElementById('2').style.zIndex = 0;

      document.getElementById('3').style.zIndex = 0;

      document.getElementById(id).style.zIndex = 1;

    }

Funkcja działa tak, że manipuluje parametrem z-index, czyli tym który element jest bardziej na wierzchu. Jeśli ustawisz divy jeden na drugim, a później w odnośniku dodasz onclick="ontop(id)". Niby wszystko pięknie ale w momencie gdy strona by się rozrosła trzeba dodawać kod do js'a i każdemu kolejnemu divowi dawać id.

I jeszcze to http://helion.pl/ksiazki/javascript-i-jquery-nieoficjalny-podrecznik-david-sawyer-mcfarland,jsjqnp.htm#opis <- w tym darmowym fragmencie jest co nieco na ten temat opisane, jeszcze sam nie sprawdzałem.

komentarz 9 lipca 2015 przez Maciej Gzela Nowicjusz (140 p.)

Mam listę wypunktowaną:

	<div id="menu">
		<ol>
				<li><a href="#">a</a></li>
				<li><a href="#">b</a></li>
				<li><a href="#">c</a></li>
		</ol>
	
	</div>

Gdzie tu wstawić zdarzenie onclick?

 

komentarz 9 lipca 2015 przez L3t94 Użytkownik (900 p.)
W znaczniku a, po a hrefie
komentarz 9 lipca 2015 przez Maciej Gzela Nowicjusz (140 p.)

Dobra, to już działa :D . Teraz już chyba ostatnie pytanie:

	function ontop(id)
	{
		document.getElementById("a").display:none;
		document.getElementById("b").display:none;
		document.getElementById("c").display:none;
		
		document.getElementById(id).display:block;
		
	}

Display:none chyba powinno być czymś zastąpione aby to działało. Ale czym?

komentarz 9 lipca 2015 przez L3t94 Użytkownik (900 p.)
edycja 9 lipca 2015 przez L3t94

.style nie powinno być?
Polecam
http://kodcss.pl/dodatki/inne/rozne/mapa-wartosci-wlasciwosci-css

To działa, tylko tak jak pisałem wcześniej takie rozwiązanie nie ma sesnu na większą stronę. No ale jest to łatwe rozwiązanie, wręcz łopatologiczne. Nie trzeba odrazu nic skomplikowanego.

Jak już chcesz tak to zauważ, że JS ma inną składnie. To inny język w końcu.

function ontop(id)

    {

      document.getElementById('1').style.display="none";

      document.getElementById('2').style.display="none";

      document.getElementById('3').style.display="none";

      document.getElementById(id).style.display="block";

    }

 

komentarz 9 lipca 2015 przez Maciej Gzela Nowicjusz (140 p.)

Dobra, naprawiłem wszystkie błędy i teraz pięknie śmiga :D Dla ciekawskich to co wymyśliłem:

 

	<script>
	
	function onload()
	{
	
		document.getElementById('b').style.display = 'none';
		document.getElementById('c').style.display = 'none';
	
	}
	
	function ontop(id)
	{
		document.getElementById('a').style.display = 'none';
		document.getElementById('b').style.display = 'none';
		document.getElementById('c').style.display = 'none';
		
		document.getElementById(id).style.display = 'block';
		
	}
	
	</script>
	
	
</head>

	<body onload=onload();>

	<div id="a">
	</div>

	<div id="b">
	</div>

	<div id="c">
	</div>
	
	<div id="menu">
		<ol>
				<li><a href="#"onclick=ontop('a');>a</a> </li>
				<li><a href="#"onclick=ontop('b');>b</a></li>
				<li><a href="#"onclick=ontop('c');>c</a></li>
		</ol>
	
	</div>

	</body>

</html>

Dziękuję wszystkim za pomoc :D Temat do zamknięcia :D

Podobne pytania

+10 głosów
14 odpowiedzi 2,524 wizyt
+12 głosów
4 odpowiedzi 1,964 wizyt
pytanie zadane 12 kwietnia 2015 w JavaScript przez krecik1334 Maniak (58,390 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...