Html - zmiana tekstu po kliknieciu.

pytanie zadane 31 sierpnia 2016 w HTML i CSS przez czmyk Obywatel (1,100 p.)

Witam,

ostatnio bawie sie w html'u i mam pewne pytanie.Jest strona głowna a na niej menu, Zalozmy ze w nim znajduja sie numery od 1 do 10 a po kliknieciu kazdego z nich na stronie pojawia sie inny tekst (np 1111111, 222222). Zrobilem to w podstawowy sposob ale jest on nie wydajny, bo w folderze z projektem jest spory balagan. Czy da sie to zrobic inaczej?

	<div id="menu">
	<a href="spr1.html"><div class="numer">1</div></a>
	<a href="spr2.html"><div class="numer">2</div></a>
	<a href="spr3.html"><div class="numer">3</div></a>
	<a href="spr4.html"><div class="numer">4</div></a>
	<a href="spr5.html"><div class="numer">5</div></a>
	<a href="spr6.html"><div class="numer">6</div></a>
	<a href="spr7.html"><div class="numer">7</div></a>
	<a href="spr8.html"><div class="numer">8</div></a>
	<a href="spr9.html"><div class="numer">9</div></a>
	<a href="spr10.html"><div class="numer">10</div></a>
	</div>

2 odpowiedzi

odpowiedź 31 sierpnia 2016 przez Lid$ Mądrala (6,300 p.)
wybrane 1 września 2016 przez czmyk

Najlepsza

Siemka! :D No ogólnie ciężko cokolwiek takiego zrobić bez js, php, bazy danych itp ale wymyśliłem coś takiego.. może o coś podobnego ci chodziło także może się przydać:


<!DOCTYPE HTML>
<html lang="pl">
	<head>
		<meta charset="utf-8" />	
		<style>

.numer
{
	color: black;
	font-size: 20px;
}		

.numer div
{
	background-color: green;
	font-size: 20px;
	padding: 50px;
	display: none;
}

.numer:active div
{
	display: flex;
	font-size: 20px;
	padding: 50px;
	color: #fff;
}

.numer1
{
	color: black;
	font-size: 20px;
}		

.numer1 div
{
	background-color: red;
	font-size: 20px;
	padding: 50px;
	display: none;
}

.numer1:active div
{
	display: flex;
	font-size: 20px;
	padding: 50px;
	color: #fff;
}

.numer2
{
	color: black;
	font-size: 20px;
}		

.numer2 div
{
	background-color: blue;
	font-size: 20px;
	padding: 50px;
	display: none;
}

.numer2:active div
{
	display: flex;
	font-size: 20px;
	padding: 50px;
	color: #fff;
}

		</style>
	</head>
	<body>

		<div class="numer">Kliknij<div>Wyswietlany tekst :D</div></div>
		<div class="numer1">Kliknij<div>Wyswietlany tekst2 :D</div></div>
		<div class="numer2">Kliknij<div>Wyswietlany tekst3 :D</div></div>
		
	</body>
</html>

1	komentarz 31 sierpnia 2016 przez niezalogowany to już lepiej na checkboxach się pobawić

komentarz 31 sierpnia 2016 przez Lid$ Mądrala (6,300 p.)

No ale nie jest to już czasem javascript?

komentarz 31 sierpnia 2016 przez niezalogowany

Nie. :checked ~ :not(:checked) ~ , i można w za pomocą HTML/CSS napisać prymitywną warstwę pseudo-logiki

komentarz 31 sierpnia 2016 przez Lid$ Mądrala (6,300 p.)

Yhm no może.. nie wnikam..

komentarz 31 sierpnia 2016 przez xmentor Nałogowiec (49,520 p.)
edycja 31 sierpnia 2016 przez xmentor

Za znacznik font powinni wsadzać do więzienia w 2016r.

komentarz 31 sierpnia 2016 przez Lid$ Mądrala (6,300 p.)

Przedstawiłem tylko działanie.. nawet się nie zastanawiałem gruntownie nad kodem, czy to zdeprecjonowane czy nie.. godzina i pośpiech robi swoje.

komentarz 31 sierpnia 2016 przez czmyk Obywatel (1,100 p.)

Bardziej chodzilo mi o to zeby wyswietlal sie caly czas do poki nie kliknie sie innego przycisku a nie ze trzeba przytrzymac zeby sie wyswietlalo.

komentarz 2 września 2016 przez Lid$ Mądrala (6,300 p.)

Pobawiłem się na checkboxach i wyszło mi takie coś.. innych pomysłów nie mam..

<!DOCTYPE HTML>
<html lang="pl">
    <head>
        <meta charset="utf-8" />  
        <style>
 
.jeden:checked ~ .ccc1:before {
	content:'1 jakis tekst';
	font-size: 20px;
	background-color: yellow;
}
.dwa:checked ~ .ccc1:before {
	content:'2 bleble';
	font-size: 30px;
	background-color: yellow;
}
.trzy:checked ~ .ccc1:before {
	content:'3 jeszcze cos innego';
	font-size: 40px;
	background-color: yellow;
}
.cztery:checked ~ .ccc1:before {
	content:'4 trolololo';
	font-size: 50px;
	background-color: yellow;
}
.piec:checked ~ .ccc1:before {
	content:'5 tekst piec';
	font-size: 60px;
	background-color: yellow;
}

        </style>
    </head>
    <body>

        Wyświetl jeden:<input class="jeden" name="nazwa" type="radio" checked="checked" value="jeden" /><br />
		Wyświetl dwa:<input class="dwa" name="nazwa" type="radio" value="dwa" /><br />
		Wyświetl trzy:<input class="trzy" name="nazwa" type="radio" value="trzy" /><br />
		Wyświetl cztery:<input class="cztery" name="nazwa" type="radio" value="cztery" /><br />
		Wyświetl pięć:<input class="piec" name="nazwa" type="radio" value="piec" />


		<div class="ccc1"></div>
		
         
    </body>
</html>

komentarz 2 września 2016 przez niezalogowany

No i ładnie wyszło.

Teraz tylko dodać label do checkboxów, checkboxom dać display none; i mamy rozwiązanie problemu bez JS : )

komentarz 2 września 2016 przez Lid$ Mądrala (6,300 p.)

Dopieściłem i śmiga aż miło xD

<!DOCTYPE HTML>
<html lang="pl">
    <head>
        <meta charset="utf-8" />  
        <style>
 
 .jeden, .dwa, .trzy, .cztery, .piec
 {
	display: none;
 }
 
.jeden:checked ~ .ccc1:before {
	content:'1 jakis tekst';
	font-size: 20px;
	background-color: yellow;
}
.dwa:checked ~ .ccc1:before {
	content:'2 bleble';
	font-size: 30px;
	background-color: yellow;
}
.trzy:checked ~ .ccc1:before {
	content:'3 jeszcze cos innego';
	font-size: 40px;
	background-color: yellow;
}
.cztery:checked ~ .ccc1:before {
	content:'4 trolololo';
	font-size: 50px;
	background-color: yellow;
}
.piec:checked ~ .ccc1:before {
	content:'5 tekst piec';
	font-size: 60px;
	background-color: yellow;
}

        </style>
    </head>
    <body>

		<label for="jeden">Wyświetl jeden</label>
        <input id="jeden" class="jeden" name="nazwa" type="radio" checked="checked" value="jeden" /><br />
		
		<label for="dwa">Wyświetl dwa</label>
		<input id="dwa" class="dwa" name="nazwa" type="radio" value="dwa" /><br />
		
		<label for="trzy">Wyświetl trzy</label>
		<input id="trzy" class="trzy" name="nazwa" type="radio" value="trzy" /><br />
		
		<label for="cztery">Wyświetl cztery</label>
		<input id="cztery" class="cztery" name="nazwa" type="radio" value="cztery" /><br />
		
		<label for="piec">Wyświetl pięć</label>
		<input id="piec" class="piec" name="nazwa" type="radio" value="piec" />


		<div class="ccc1"></div>
		
         
    </body>
</html>