• 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

+2 głosów
4,833 wizyt
pytanie zadane 8 lipca 2015 w JavaScript, jQuery, AJAX 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 Mentor (454,620 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,780 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 Mentor (454,620 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,730 p.)
"Skakanie" pornela w sombrero wciąga bardziej niż sam content strony
komentarz 9 lipca 2015 przez Comandeer Mentor (454,620 p.)
Haha, dokładnie :D
0 głosów
odpowiedź 8 lipca 2015 przez hypothermi Obywatel (1,180 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 Mentor (454,620 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 795 wizyt
+12 głosów
4 odpowiedzi 1,325 wizyt
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

63,304 zapytań

109,563 odpowiedzi

228,870 komentarzy

43,892 pasjonatów

Przeglądających: 84
Pasjonatów: 10 Gości: 74

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...