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

Dynamiczne alokowanie zawartości do div-a. NIE z osobnego pliku.

VPS Starter Arubacloud
0 głosów
629 wizyt
pytanie zadane 13 lipca 2015 w PHP przez artimal Gaduła (4,800 p.)
Witam, jak wtemacie, będe miał coś takiego:
<div id="L"> ... </div>
<div id="R"> ... </div>
 

w tym samym pliku .php będą znajdowały się inne divy:
<div id="1">coś tam</div>
<div id="2">coś tam coś tam</div>
(...)

Następnie w divie L będą inne divy. Chciałbym aby po kliknięciu na dany div z L, w divie R pojawiał się div o danym id np 1.

I aby to wszystko było w jednym pliku. Może nawet nie potrzeba divóv o id 1,2,3,4,5 ale nie znam innej metody. Może można jakoś inaczej oznaczyć zawartość która będzie się wczytywała do R po klikaniu na poszczególne divy z L :)

Być może będzie to trudne dla kogoś do zrozumienia, to proszę mi napsiać a dam jakieś rysunki czy coś ;)
Pozdrawiam :)

1 odpowiedź

+2 głosów
odpowiedź 13 lipca 2015 przez Comandeer Guru (599,730 p.)
wybrane 14 lipca 2015 przez artimal
 
Najlepsza
komentarz 13 lipca 2015 przez artimal Gaduła (4,800 p.)

Coś dziwny dla mnie ten kod:
 

<p>
  <a href="#item1">item 1</a>
  <a href="#item2">item 2</a>
  <a href="#item3">item 3</a>
  <a href="#default">clear</a>

<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- by default, show no text -->
</div>

1. Co robi <p> na początku?
2. Dlaczego znaczniki <p> nie są zamykane za pomocną </p> ?
3. Tutaj div items zawiera po prostu zawartość do ładowania, lecz do diva o jakiej nazwie zostaną załadowane itemy? Czy po prostu znaczniki <p> są ładowane do diva items ale sąwidoczne tylko przy kliknięciu na href?

komentarz 13 lipca 2015 przez Comandeer Guru (599,730 p.)

1. Co robi <p> na początku? 

Otwiera akapit ;) Osobiście zrobiłbym to na liście.

 2. Dlaczego znaczniki <p> nie są zamykane za pomocną </p> ? 

To akurat wynika z dziwnego zapisu w specyfikacji HTML. Akapit zostaje automatycznie zamknięty, gdy natrafi na element blokowy. Tym samym akapit skończy się w chwili otwarcia diva. Pomimo, że znacznik zamykający akapit jest opcjonalny, to jednak lepiej (czytelniej, ładniej) jest go stosować

Czy po prostu znaczniki <p> są ładowane do diva items ale sąwidoczne tylko przy kliknięciu na href? 

Dokładnie tak. 

komentarz 13 lipca 2015 przez artimal Gaduła (4,800 p.)
Ok, rozumiem, ale tak ogólnie to po co taki samotny <p> na początku? Jaką on gra rolę?
komentarz 13 lipca 2015 przez Comandeer Guru (599,730 p.)
Kontenera dla menu.
komentarz 13 lipca 2015 przez artimal Gaduła (4,800 p.)
Czym jest spowodowane pojawianie się wszystkiego na raz w items i nie działanie href-ów?
komentarz 13 lipca 2015 przez Comandeer Guru (599,730 p.)
Pewnie brakiem odpowiednich stylów w CSS
komentarz 13 lipca 2015 przez artimal Gaduła (4,800 p.)

Mam takie coś:
 

<div id="zadanie">
<div class="wiersz"><a href="#item1"><img src="zadania/1/1/1_1.gif"/></a></div>
<div class="wiersz"><a href="#item2"><img src="zadania/1/1/1_2.gif"/></a></div>
<div class="wiersz"><a href="#item3"><img src="zadania/1/1/1_3.gif"/></a></div>
<div class="wiersz"><a href="#default">clear</a></div>
</div>

<div id="wyjasnienie">
<div id="items">
<p id="item1">iajsdijaisjdijijijij</p>
<p id="item2">bbbbunwvunwbbbbbbvnuvwnbbubbbb</p>
<p id="item3">popowowowowommmmmm</p>
<p id="default"></p>
</div>
</div>
<div style="clear:both;"></div>

A w stylu:
 

div.items p {display: none}
div.items p:target {display: block}

I nie rozumiem co tu ma nie działać, jest to kod z przykładu.

komentarz 14 lipca 2015 przez Comandeer Guru (599,730 p.)
W stylach masz klasę a w kodzie identyfikator
komentarz 14 lipca 2015 przez artimal Gaduła (4,800 p.)
W sensie? Co nazywasz identyfikatorem? Bo klasą zapewnie to co podałem, że mam w stylu.
komentarz 14 lipca 2015 przez artimal Gaduła (4,800 p.)

W stylach masz klasę a w kodzie identyfikator

Aha, chodziło po prostu o niezgodność id i class względem # i . w stylu... Teraz działa ;) Dziękuję.

komentarz 20 lipca 2015 przez artimal Gaduła (4,800 p.)
Dlaczego po dodawaniu do <p id="item1"> obrazka, mechanizm przestaje działać, wczytuje poprawnie item nr1 lecz obrazki z item1 wczytuje do innych itemów... Da się jakoś temu zaradzić?
komentarz 20 lipca 2015 przez Comandeer Guru (599,730 p.)
Używasz kilka razy tego samego id?
komentarz 20 lipca 2015 przez artimal Gaduła (4,800 p.)
Nie, id jest oczywiście zmieniane, pisze item1, item2. Całe dziwactwo polega na tym, że działa jeżeli nie ma dodawanych obrazków do itemów...
komentarz 20 lipca 2015 przez artimal Gaduła (4,800 p.)
Może wina leży w użyciu znacznika p? Bo już nie mam pojęcia.
komentarz 20 lipca 2015 przez Comandeer Guru (599,730 p.)
Hm… Pokaż to.
komentarz 20 lipca 2015 przez artimal Gaduła (4,800 p.)
<div id="panel" class="przewijanie">
<?php require_once "L.php";?>
<h1>1. Podstawy matematyki</h1>
<h2>1. Zbiory liczbowe, NWW, NWD.</h2></br>
<h3>Wyróżniamy następujące zbiory liczbowe:</h3>
<a href="#item1"><div class="wiersz"><h4>-N</h4></div></a>
<a href="#item2"><div class="wiersz"><h4>-C</h4></div></a>
<a href="#item3"><div class="wiersz"><h4>-W</h4></div></a>
<a href="#item4"><div class="wiersz"><h4>-R</h4></div></a>
<a href="#item5"><div class="wiersz"><h4>-NW</h4></div></a>
</br><h3>Najlepiej przedstawi ci to ten schemat:</h3>
<center><img src="zadania/1/1/0_1.jpg"  width="100%" height="100%"/></center>
</div>

<div id="panel">
<?php require_once "R.php";?> 
<div class="items">
<p id="item1">Liczby Naturalne powstają na zasadzie dodawania 1 do każdej kolejnej liczby zczynając od zera. Nie posiadają żadnych pierwiastków, ułamków, liczb ujemnych i innych udziwnień.</br></br><h4>Przykładowo:</h4></br><img src="zadania/1/1/0_2.png"/></br><img src="zadania/1/1/0_3.png"/></br><img src="zadania/1/1/0_4.png"/></br><img src="zadania/1/1/0_5.png"/></br><img src="zadania/1/1/0_6.png"/></br><img src="zadania/1/1/0_7.png"/></p>
<p id="item2">Liczby Całkowite to liczby Naturalne + ujemne</br>Przykładowo: -1,-5,0,3,5</p>
<p id="item3">Liczby Wymierne to Liczby Całkowite w połączeniu z ułamkami jak </p>
<p id="item4"></p>
<p id="item5"></p>
</div>
</div>
<div style="clear:both;"></div>

 

komentarz 20 lipca 2015 przez Comandeer Guru (599,730 p.)

Wpychasz tam h4, które jest elementem blokowym, a zgodnie ze specyfikacją HTML p to jedyny element, który automatycznie się zamyka przy napotkaniu elementów blokowych.

komentarz 20 lipca 2015 przez artimal Gaduła (4,800 p.)
Jak więc nadać styl fragmentowi tekstu wewnątrz p nie używając h? ;)
komentarz 20 lipca 2015 przez Comandeer Guru (599,730 p.)

Nadać styl != użyć h. Stylowanie nie ma nic do użytego znacznika.

Jeszcze prościej jest wymienić p na div

komentarz 21 lipca 2015 przez artimal Gaduła (4,800 p.)
Udało mi się przekonwertować to na divy, wszystko pięknie działa, dzięki :D

Podobne pytania

0 głosów
2 odpowiedzi 1,521 wizyt
+1 głos
2 odpowiedzi 2,442 wizyt
0 głosów
1 odpowiedź 147 wizyt

92,454 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!

...