ugrás a tartalomhoz

Javascript style.display='block'/'none'

GtNM · 2009. Feb. 7. (Szo), 14.13
Helló mindenkinek!
Az internetet böngészve találtam rá erre a kis scriptre,ami nagyon hasznos lenne számomra,ha megtudnám azt oldani,hogy mikor nyitva van valamelyik "pl.Teszt2 van nyitva",akkor a másikra kattintva"pl.Teszt4-re kattintunk" bezáródik az ami éppen nyitva van"a pl.-k alapján a Teszt2-ő záródna be",direkt nyílnak az ablakok egy helyen ki.
Így néz ki a kód:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Teszt</title>

<script>
function teszt(sec)
{
thisSec = eval('e' + sec);
if (thisSec != null){
if (thisSec.length){
if (thisSec[0].style.display != 'none'){
for (var i=0;i<thisSec.length;i++) {thisSec[i].style.display = 'none'}
}
else{
for (var i=0;i<thisSec.length;i++) {thisSec[i].style.display = 'inline'}
}
}
else{
if (thisSec.style.display != 'none') {thisSec.style.display = 'none'}
else{thisSec.style.display = 'inline'}
}
}

}
</script>
</head>
<body>
<a href="javascript:teszt(1)">Teszt1</a>
<a href="javascript:teszt(2)">Teszt2</a>
<a href="javascript:teszt(3)">Teszt3</a>
<a href="javascript:teszt(4)">Teszt4</a>
<div id="e1" style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 425px; top: 400px;display:none;">
valami1</div>
<div id="e2" style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 425px; top: 400px;display:none;">
valami2</div>
<div id="e3" style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 425px; top: 400px;display:none;">
valami3</div>
<div id="e4" style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 425px; top: 400px;display:none;">
valami4</div>
</body>

</html>
Ezekkel kéne próbálkoznom:
valamiOpen.style.display='block';
valamiClosed.style.display='none';
,de nem nagyon értek a Js-hez és nem tudom,hogy fűzzem össze a kódokat egymással,egy kis kiindulási segítséget szeretnék kérni,hogy melyik függvényeket/paramétereket hogy használjam itt fel,hogy ezt megtudjam oldani vagy ha már volt másnak hasonló problémája az ő megoldást is szívesen meghallgatnám,és kérlek titeket olyan választ ne adjatok,hogy álljak neki az elejétől js-t tanulni,nem hiszem,hogy hamar megtalálnám a megoldást.
‹ <script> setTimeout, target. IE 6 rosszul számolja a szélességet ›
 ■
1

egy kicsit mashogyan

nemalevi · 2009. Feb. 8. (V), 00.32
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">  
  4. <title>Teszt</title>  
  5. <style type='text/css'>  
  6. span {text-decoration:underline;color:blue;cursor:pointer}  
  7. div {position: absolute; width: 100px; height: 100px; z-index: 1; left: 425px; top: 400px;display:none;}  
  8. </style>  
  9. <script>  
  10. function teszt(id) {  
  11. for(var i=1;i<=4;i++) {  
  12. var idk = 'e'+i;  
  13. if(idk == id) { document.getElementById(idk).style.display='block';}   
  14. else { document.getElementById(idk).style.display='none'; }  
  15.  }  
  16. }  
  17. </script>  
  18. </head>  
  19. <body>  
  20. <span onclick='teszt("e1")'>Teszt1</span>  
  21. <span onclick='teszt("e2")'>Teszt2</span>  
  22. <span onclick='teszt("e3")'>Teszt3</span>  
  23. <span onclick='teszt("e4")'>Teszt4</span>  
  24. <div id="e1">valami1</div>  
  25. <div id="e2">valami2</div>  
  26. <div id="e3">valami3</div>  
  27. <div id="e4">valami4</div>  
  28. </body>  
  29. </html>  
3

Univerzálisabb

inti · 2009. Feb. 20. (P), 12.08
  1. function teszt(id)  
  2. {  
  3.     divs = document.getElementsByTagName("div");  
  4.     for (i=0;i<divs.length;i++)  
  5.     {  
  6.         if (divs[i].id == id)  
  7.         {  
  8.             divs[i].style.display = "block";  
  9.         }  
  10.         else if (divs[i].id.match(/e[0-9]+/))   
  11.         {  
  12.             divs[i].style.display = "none";  
  13.         }  
  14.      }  
  15. }  
ui.: használjatok jQueryt :)
  1. function teszt(id)  
  2. {  
  3.     $("div[id^=e").hide().filter("#"+id).show();  
  4. }  
2

Hihi köszi szépen :D

GtNM · 2009. Feb. 8. (V), 05.18
Nagyon jól működik, tökéletes! Habár közben nekiálltam javascript-et tanulni és nem feleslegesen,mert még jobb megoldást találtam,arra amit megszerettem volna valósítani,de most ebből is felhasználok 1-2 dolgot pl.én a span-okat nem szoktam használni,de úgy látom,hogy egyszerűbb,mint az <a herf="xxx"></a>-el szórakozni...köszönöm szépen nemalevi!