 Problem z rozwijanym menu i funkcją onclick |
| Problem z rozwijanym menu i funkcją onclick |
 
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 19 Pomógł: 0 Dołączył: 18.02.2010 Ostrzeżenie: (0%) 
 |
Witam,
stworzyłem menu, które opiera się o prostą funkcję javascript, jednakże nie działa ono prawidłowo. Mianowicie po otworzeniu strony trzeba kliknąć dwa razy na pole, aby się "rozwinęło"; później skrypt reaguje już na jednokrotne kliknięcie. (dotyczy każdego pola z osobna) Chciałem także, aby skrypt działał w ten sposób, że po kliknięciu na inne pole niż aktualnie otwarte, owo aktualnie otwarte zamyka się i otwiera się to, na które w danej chwili użytkownik kliknął. Akcję tę miał realizować zapis: Kod if(p != "belka_imprezy"){ document.getElementById('belka_imprezy').style.display = "none"; document.getElementById('belka_imprezy_top').style.background = "#00078a";} if(p != "belka_wesela"){ document.getElementById('belka_wesela').style.display = "none"; document.getElementById('belka_wesele_top').style.background = "#00078a";} if(p != "belka_reklama"){ document.getElementById('belka_reklama').style.display = "none"; document.getElementById('belka_reklama_top').style.background = "#00078a";} if(p != "belka_film"){ document.getElementById('belka_film').style.display = "none"; document.getElementById('belka_film_top').style.background = "#00078a";} Niestety system działa w pełni prawidłowo tylko przy przełączeniu z "Imprezy" na "Wesela". Próbowałem odnaleźć sedno problemu, ale bezowocnie, zatem proszę o pomoc w analizie. Załączam grafikę przedstawiającą menu:  oraz kod: Kod <html xmlns="http://www.w3.org/1999/xhtml">
<head> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> //<![CDATA[ function rozwin(p,q){ var akap = document.getElementById(p); var cell = document.getElementById(q); if(akap.style.display == "none"){ akap.style.display = "block"; cell.style.background = "#0009c6"; if(p != "belka_imprezy"){ document.getElementById('belka_imprezy').style.display = "none"; document.getElementById('belka_imprezy_top').style.background = "#00078a";} if(p != "belka_wesela"){ document.getElementById('belka_wesela').style.display = "none"; document.getElementById('belka_wesele_top').style.background = "#00078a";} if(p != "belka_reklama"){ document.getElementById('belka_reklama').style.display = "none"; document.getElementById('belka_reklama_top').style.background = "#00078a";} if(p != "belka_film"){ document.getElementById('belka_film').style.display = "none"; document.getElementById('belka_film_top').style.background = "#00078a";} } else{ akap.style.display = "none"; cell.style.background = "#00078a"; } } //]]> </script> </head> <body> <table class="naglowek"> <tr class="gorna_belka"> <td style="text-align: center;" class="clear_td">00-00-0000</td> <td style="text-align: center;" class="clear_td"> Imieniny</td> <td style="text-align: right;" class="uslugi">o nas:</td> <td class="title_top" id="belka_imprezy_top"><img src="grafika/bullet.gif" alt="" /> <a onclick="rozwin('belka_imprezy','belka_imprezy_top')" title="">IMPREZY</a></td> <td class="title_top" id="belka_wesela_top"><img src="grafika/bullet.gif" alt="" /> <a onclick="rozwin('belka_wesela','belka_wesela_top')" title="">WESELA</a></td> <td class="title_top" id="belka_reklama_top"><img src="grafika/bullet.gif" alt="" /> <a onclick="rozwin('belka_reklama','belka_reklama_top')" title="">REKLAMA</a></td> <td class="title_top" id="belka_film_top"><img src="grafika/bullet.gif" alt="" /> <a onclick="rozwin('belka_film','belka_film_top')" title="">FILM</a></td> <td><img src="grafika/bullet.gif" alt="" /> LOGOWANIE</td> </tr> <tr class="srodek_naglowka"> <td colspan="3" style="vertical-align: middle; text-align: left; padding-top: 10px;"> LOGO </td> <td><div id="belka_imprezy" class="rozw_belka"> <p class="rozw_belka"> <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> studniówki<br /> <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> koncerty </p> </div></td> <td><div id="belka_wesela" class="rozw_belka"> <p class="rozw_belka" style="margin-top: -9px;"> <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> śluby<br /> <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> wesela<br /> <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> chrzciny </p> </div> </td> <td><div id="belka_reklama" class="rozw_belka"> <p class="rozw_belka"> <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> spoty reklamowe<br /> </p> </div></td> <td><div id="belka_film" class="rozw_belka"> <p class="rozw_belka"> <img src="grafika/bullet.gif" style="margin-left: 10px;" alt="" /> filmy<br /> </p> </div></td> <td class="rozw_belka"> <form action="pliki/zaloguj.php" method="post"> <table align="center" style="font-size: 12px;"> <tr><td><img src="grafika/bullet.gif" class="bullet" alt="" /> login </td><td> <input type="text" maxlength="80" name="login" /></td></tr> <tr> <td><img src="grafika/bullet.gif" alt="" /> hasło </td><td><input type="password" maxlength="80" name="haslo" /></td></tr> <tr><td colspan="2"> <input type="submit" class="button" name="zaloguj" value="» Zaloguj «" /></td></tr> </table> </form> <center><br /> Nie pamiętasz <a href="" title="">hasła</a>?<br /> Nie masz konta?<br /> <a href="" title="">Zarejestruj</a> się </center> </td> </tr> </table> </body> </html> Ten post edytował sianx 25.03.2011, 22:36:12 |
 |
 
|
 |
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 275 Pomógł: 32 Dołączył: 21.03.2006 Skąd: Warszawa Ostrzeżenie: (20%) 
|
Zostaw javascript i zrób to w CSS.
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 19 Pomógł: 0 Dołączył: 18.02.2010 Ostrzeżenie: (0%)
|
Ale czy przypadkiem IE nie będzie miał problemów z poprawnym wyświetlaniem tegoż menu [opartego o CSS]?
Ten post edytował sianx 28.03.2011, 20:02:53 |
|
|
|
|
Post
#4
|
|
 Grupa: Zarejestrowani Postów: 370 Pomógł: 43 Dołączył: 1.12.2007 Skąd: Kędzierzyn Koźle Ostrzeżenie: (0%)
|
@konole, chętnie posłucham jaki masz pomysł na zrobienie czegokolwiek w css opartego o "dwuklik"
-------------------- pretty as a shit.
|
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 19 Pomógł: 0 Dołączył: 18.02.2010 Ostrzeżenie: (0%)
|
Hmmm... właściwie to "dwuklik" nie jest prawidłowym "odruchem" w powyższym menu. Interesuje mnie reakcja na pojedyncze kliknięcie, chociaż i tak nie wiem, jak wykonać w CSS ową reakcję. Czy tu chodzi o jakieś pseudo klasy?
I oczywiście prosiłbym o odpowiedź na pytanie: Cytat Ale czy przypadkiem IE nie będzie miał problemów z poprawnym wyświetlaniem tegoż menu [opartego o CSS]? lub ewentualnie pomoc w rozwiązaniu problemu z mojego 1. posta. Dziękuję Ten post edytował sianx 29.03.2011, 19:02:49 |
|
|
|
 |
|
Aktualny czas: 22.08.2025 - 03:29 |
