JavaScript zakladki

0

Witam,

zrobilem w prosty sposob zakladki ktore przelanczaja zawartosc bez przeladowywania strony, wszystko dziala OK, ale nie podoba mi sie ze aby zaznaczyc ktora zakladka jest pokazywana trzeba za kazdym razem powielac dostepne menu.

Czy jest jakis inny sposob zeby nie powielac menu i zeby bylo wiadome ktora zakladka jest aktualnie wyswietlana ?

Z gory dziekuje za pomoc

oto kod:

<html>
	<head>
		<title>aaa</title>
	</head>
	<body>
		<div class="menu">
  
			<p id="m0" style="display:none;">
				<a href="javascript:void(0)" onclick="menu(0); return false;"><font color="yellow">menu 0</font></a>
				<a href="javascript:void(0)" onclick="menu(1); return false;">menu 1</a>
				<a href="javascript:void(0)" onclick="menu(2); return false;">menu 2</a>
				Zero menu
			</p>
			
			<p id="m1" style="display:none;">
				<a href="javascript:void(0)" onclick="menu(0); return false;">menu 0</a>
				<a href="javascript:void(0)" onclick="menu(1); return false;"><font color="yellow">menu 1</font></a>
				<a href="javascript:void(0)" onclick="menu(2); return false;">menu 2</a>
				Pierwsze menu
			</p>
			
			<p id="m2" style="display:none;">
				<a href="javascript:void(0)" onclick="menu(0); return false;">menu 0</a>
				<a href="javascript:void(0)" onclick="menu(1); return false;">menu 1</a>
				<a href="javascript:void(0)" onclick="menu(2); return false;"><font color="yellow">menu 2</font></a>
				Drugie menu
			</p>
		</div>
	</body>
</html>

<script language="javascript" type="text/javascript">
<!--
var pop = 0, timeid;

function menu(element) {
document.getElementById("m" + pop).style.display = "none";
document.getElementById("m" + element).style.display = "inline";

pop = element;
clearInterval(timeid);
timeid = setInterval(rotation, 5000);
}
menu(0);

function rotation() {
menu((pop+1) % 3);
}
// -->
</script>
0

Nadaj im identyfikatory.

<a href="javascript:void(0)" id="pos0" onclick="menu(0); return false;" style="color:red;">menu 0</a>
<a href="javascript:void(0)" id="pos1" onclick="menu(1); return false;">menu 1</a>
<a href="javascript:void(0)" id="pos2" onclick="menu(2); return false;">menu 2</a>
<br><br>
<div id="m0">Treść 0</div>
<div id="m1" style="display: none;">Treść 1</div>
<div id="m2" style="display: none;">Treść 2</div>

I potem po kliknięciu:

function menu(element) {
maks_elem = 2; //Tutaj powinno być ID najwyższego elementu w menu (w tym przykładzie jest to "2")
for(i=0; i<maks_elem+1; i++) { //Wykonaj dla wszystkich pozycji w menu
   document.getElementById('pos' + i).style.color = 'black'; //Zmień kolor czcionki na czarny
   document.getElementById('m' + i).style.display = 'none'; //Spraw, żeby treść danego elementu była niewidoczna
}
document.getElementById('pos' + element).style.color = 'red'; //Zmień kolor czcionki klikniętego elementu na czerwony
document.getElementById('m' + element).style.display = 'inline'; //Uwidocznij treść klikniętego elementu
}

Przykład działania: http://to.o12.pl/work/4programmers/597036.php

0

dzieki wielki :) poprawiłem to w ten sposob:

<html>
	<head>
		<title></title>
	</head>
	<body>
		<div class="menu">
			<a href="javascript:void(0)" id="pos0" onclick="menu(0); return false;">menu 0</a>
			<a href="javascript:void(0)" id="pos1" onclick="menu(1); return false;">menu 1</a>
			<a href="javascript:void(0)" id="pos2" onclick="menu(2); return false;">menu 2</a>
  
			<p id="m0" style="display:none;">Zero menu</p>
			<p id="m1" style="display:none;">Pierwsze menu</p>
			<p id="m2" style="display:none;">Drugie menu</p>
		</div>
	</body>
</html>

<script language="javascript" type="text/javascript">
<!--
var pop = 0, timeid;

function menu(element) {
maks_elem = 2;

document.getElementById("m" + pop).style.display = "none";
document.getElementById("m" + element).style.display = "inline";

document.getElementById("pos" + pop).style.color = "blue";
document.getElementById("pos" + element).style.color = "red";

pop = element;
clearInterval(timeid);
timeid = setInterval(rotation, 5000);
}
menu(0);

function rotation() {
menu((pop+1) % 3);
}
// -->
</script>

a moje drugie pytanie to jak działac w podobny sposob na stylach tabeli? np:

<p id="m0" style="display:none;">
	<table style="width:100%; border-collapse: collapse;">
		<tr>
			<td style="text-align:center; border-style: outset outset none outset;" onclick="menu(0); return false;">menu 0</td>
			<td style="text-align:center; background-color:lightgray; border-style: inset;" onclick="menu(1); return false;">menu 1</td>
			<td style="text-align:center; background-color:lightgray; border-style: inset;" onclick="menu(2); return false;">menu 2</td>
		</tr>
	</table>
	<br /><br />Zero menu
</p>
0

Nie używaj tego "pop" zostaw pętle lepiej.
Z tabelą? Normalnie. Dodajesz identyfikatory i traktujesz je dokładnie tak samo jak divy. Przykład:

document.getElementById('pos0').style.background-color = 'black';
0

Dziekuje bardzo za pomoc :D nie myslem ze to takie proste ;)

do zmiany styli np w tabeli

document.getElementById("pos" + element).style.backgroundColor = "white";
document.getElementById("pos" + element).style.borderStyle = "solid";

Jeszcze tylko zastanawia mnie to, dlaczego lepeij skorzystac z petli ? a nie pamietac poprzednika ?
Ma to jakies znaczenie ? Wtdaje mi sie ze pamietajac poprzednika mamy wieksza wydajnosc

0

Wydajność tutaj to milisekundy, a z poprzednikiem jak znam życie coś pójdzie nie tak przy błędzie skryptu etc. no i jest czytelniej wg. mnie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1