Podmiana tekstu w divach

Question

Czesc wszystkim

Ostatnio zastanawiam się jak podmienić wnętrze diva na coś innego, np.

Mamy div w którym jest tabela o zespole piłkarskim i po naciśnięciu strzałki cała strona się nie przeładowuje a podmienia się tylko div na kolejny zespół, coś w stylu gdy są obrazki na stronie i można klikać strzałkę i ona się zmieniają bez jej przeładowania, to samo chciałbym zrobić w przypadku tekstu.

W kodzie podaje dokłady przykład pracy, wiem że najpewniej muszę umieścić 1/ divy jako strzałki w prawo i lewo gdyby np chciało się cofnąć do poprzedniego diva, podmieniał by się tylko div white i to co w środku, jak to zaprogramować oraz jak/gdzie ukryć divy które są na stronie 2,3 itd a potem ten z 1 strony?

<div class="tbody">
								&ltbody&gt
								<div class="white">
									<div class="etable">
										&lth1&gtNagłówek&lt/h1&gt...&lth6&gtNagłówek&lt/h6&gt
									</div><br>
									<div class="etable">
										&ltp&gtparagraf&lt/p&gt
									</div><br>
									<div class="etable">
										Defines &ltstrong&gt<strong>strong/important</strong>&lt/strong&gt text
										</div><br>
									<div class="etable">
										Defines &ltb&gt<b>bold</b>&lt/b&gt text
									</div><br>
									<div class="etable">
										Defines &ltem&gt<em>semantic importanced</em>&lt/em&gt text
									</div><br>
									<div class="etable">
										Defines &lti&gt<i>italic</i>&lt/i&gt text
									</div><br>
									<div class="etable">
										Defines &ltsmall&gt<small>Small</small>&lt/small&gt Formatting
									</div><br>
									<div class="etable">
										Defines &ltmark&gt<mark>marked</mark>&lt/mark&gt Formatting
									</div><br>
									<div class="etable">
										It is to &ltu&gt<u>stand out</u>&lt/u&gt
									</div><br>
									<div class="etable">
										This text contains &ltsup&gt<sup>superscript</sup>&lt/sup&gt text.
									</div><br>
									<div class="etable">
										This text contains &ltsub&gt<sub>subscript</sub>&lt/sub&gt text.	
									</div><br>
								</div>
								&ltbody/&gt
							</div>
<div class="tbody">
									&ltbody&gt
									<div class="white">
										<div class="etable">
											Definiuje &ltdel&gt<del>usunięty</del>&lt/del&gt&ltins&gt<ins>wstawiony</ins>&lt/ins&gt tekst
										</div><br>
										<div class="etable">
												Określa tekst, który &lts&gt<s>nie jest już poprawy</s>&lt/s&gt
											</div><br>
										<div class="etable">
											Definiuje &ltq&gt<q> krótki cytat </q>&lt/q&gtz innego źródła
										</div><br>
										<div class="etable">
												Definuje &ltblockquote&gtcałą sekcja cytowana z innego źródła&lt/blockquote&gt
											</div><br>
										<div class="etable">
											Definuje &ltcode&gt<code>fragmenty kodu komputerowego</code>&lt/code&gt
										</div><br>
										<div class="etable">
											Definuje tytuł &ltcite&gt<cite>dzieła (ksiażki, piosenki, filmu, obrazu)</cite>&lt/cite&gt
										</div><br>
										<div class="etable">
											Definuje skróty i akronimy, np.&ltabbr&gt<abbr>"mr.", "dec.", "ASAP"</abbr>&lt/abbr&gt
										</div><br>
										<div class="etable">
											Definicja terminów &ltdfn title="Facebook"&gt<dfn title="Facebook">FB</dfn>&lt/dfn&gt - serwis społecznościowy...
										</div><br>
										<div class="etable">
											Izoluje kłopotliwą treść dla przeglądarki &ltbdi&gt<bdi>إيان</bdi>&lt/bdi&gt: 90 points
										</div><br>
										<div class="etable">
											&ltbdo dir="rtl/ltl"&gt<bdo dir="rtl">Ten tekst przechodzi od prawej do lewej</bdo>&lt/bdo&gt
										</div><br>
										<div class="etable">
											Dopiero gdy zajdzie taka potrzeba. &ltwbr&gt Złamie linie
										</div><br>
									</div>
									&ltbody/&gt
								</div>

.tbody{
    width:758px;
    height:800px;
    padding:20px;
    background-color: #b3b3b3;
    border:1px solid black;
    margin-top:20px;
}
.white{
    height:auto;
    width: 716px;
    background-color:white;
    padding:20px;
    border: 1px solid black;
    margin-top:20px;
    margin-bottom:20px;
    font-weight: 500;
}
.etable{
    border: 1px solid black;
    border-left: 3px solid green;
    height:30px;
    padding:5px;
    width:702px;
    line-height:160%;
}
.etable h1{
    margin:0;
}

 

Comments

Dodaj script a w nim np.

functtion x(){

document.getElementById("nazwa_id").innerHTML="Tu wpisujesz jak ma wygladac po kliknieciu"

}

Ale w twoim przypadku

document.getElementsByClassName('costam')=innerHTML="zmiana"

no a w przycisku w html dodaj onclick="x()"

---

Jak już coś to polecałbym document.querySelector() lub document.querySelectorAll() i addEventListener(). Piszmy po nowoczesnemu :)