Forum PHP.pl > [Jquery] Zakładki w menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Beacri

28.03.2012, 22:01:19

Witam, dopiero się uczę JQuery i mam jeszcze wiele wątpliwości. Chciałbym zrobić panel użytkownika ale żeby wszystko pojawiało się w ramach jednego formularza. Podstron ma być 5 i chciałbym wiedzieć czy da się to zrobić ładniej niż poniższy kod:

[HTML] pobierz, plaintext 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$("#link1").click(
function()
{
$("#more1").show();
$("#more2").hide();
$("#more3").hide();
});
$("#link2").click(
function()
{
$("#more1").hide();
$("#more2").show();
$("#more3").hide();
});
$("#link3").click(
function()
{
$("#more1").hide();
$("#more2").hide();
$("#more3").show();
});
 
});
 
</script>
</head>
<body>
<div>
<p>Lorem ic, posuere ac.
<a href="#" id="link1">Więcej 1</a>
<a href="#" id="link2">Więcej 2</a>
<a href="#" id="link3">Więcej 3</a>
</p>
 
<p id="more1" style="display: none;">Dział 1</p>
<p id="more2" style="display: none;">Dział 2</p>
<p id="more3" style="display: none;">Dział 3</p>
 
</div>
</body>
[HTML] pobierz, plaintext

PS: znalazłem właśnie coś takiego:
http://ferrante.pl/frontend/javascript/jqu...twe-5-zakladki/

Może uda mi się zrozumieć to dzisiaj

sybii

29.03.2012, 02:25:03

Jquery jest biblioteką JavaScript, więc podstawy trzeba znać.
Masz tu na szybko:

[PHP] pobierz, plaintext 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
	<style>
		.more p { display: none; }
	</style>
	<script type="text/javascript">
		var lastMore;
		function show(id) {
			if(lastMore != id){
				$('.more p').hide();
				$('#'+id).show();
				lastMore = id;
			}
		}
	</script>
</head>
<body>
	<div>
	<div class="menu">Lorem ic, posuere ac.
		<a href="java script:void(0)" onclick="show('more1')">Więcej 1</a>
		<a href="java script:void(0)" onclick="show('more2')">Więcej 2</a>
		<a href="java script:void(0)" onclick="show('more3')">Więcej 3</a>
	</div>
	<div class="more">
		<p id="more1">Dział 1</p>
		<p id="more2">Dział 2</p>
		<p id="more3">Dział 3</p>
	</div>
</div>
</body>
[PHP] pobierz, plaintext

I pamiętaj o tabulacjach, dzięki nim kod jest bardziej przejrzysty.

Beacri

29.03.2012, 08:45:23

Dzięki za pomoc

Podstawy JS oczywiście znam, ale mało z niego korzystałem wcześniej. Po prostu wiedziałem, ze istnieje jakiś wydajniejsze rozwiązanie takie jakie opisałeś w linijkach 8-13

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.