Autor | Zpráva | ||
---|---|---|---|
Daniel01 Profil |
#1 · Zasláno: 6. 3. 2009, 01:16:38
Zdar,
nevím jak na jeden problém... pomocí DHTML si udělám nějaký záložky, něco jako tohle (jpw.cz) Ale potřebuju zvýraznit právě "zobrazenou" záložky... Pomocí PHPčka to napíšu asi těžko... Jde něco takovýho v JS? Dík :-) PS: mám 4 <div id=""> jmenující se od "a" do "d" |
||
joe Profil |
#2 · Zasláno: 6. 3. 2009, 01:25:34
DIVu, na který klikneš nastav třídu, třeba
document.getElementById('a').className = 'active'; (minulé aktivní musíš třídu zase zrušit) a ve stylech budeš mít definované styly pro .active |
||
Daniel01 Profil |
#3 · Zasláno: 6. 3. 2009, 01:56:40
<script> var zobrazena = "a"; // pomocna promenna, na zacatku nastavena na jmeno zobrazene polozky function zobraz(polozka){ document.getElementById('a').className = 'active'; document.getElementById('b').className = 'active'; document.getElementById('c').className = 'active'; document.getElementById('d').className = 'active'; if (document.getElementById){ document.getElementById(zobrazena).style.display = "none"; // skryje předchozí polozku document.getElementById(polozka).style.display = "block"; // zobrazi se nakliknuta polozka zobrazena = polozka; // aktualne zobrazena polozka se ulozi do globalni promenne, aby se pozdeji dala skryt return false; // odkaz neproklikne na href } </script> JS fakt nedělám, takže nevím :-) Ale asi budu muset udělat 4 (podmínky ?), něco takovýho? |
||
joe Profil |
#4 · Zasláno: 6. 3. 2009, 02:00:41
Tak pak asi takhle
<script> var zobrazena = "a"; // pomocna promenna, na zacatku nastavena na jmeno zobrazene polozky function zobraz(polozka){ if (document.getElementById){ document.getElementById(zobrazena).style.display = "none"; // skryje předchozí polozku document.getElementById(zobrazena).className = ""; // odstrani tridu z puvodni polozky document.getElementById(polozka).style.display = "block"; // zobrazi se nakliknuta polozka document.getElementById(polozka).className = "active"; // nastavi tridu aktivni polozce zobrazena = polozka; // aktualne zobrazena polozka se ulozi do globalni promenne, aby se pozdeji dala skryt return false; // odkaz neproklikne na href } </script> |
||
Daniel01 Profil |
#5 · Zasláno: 6. 3. 2009, 02:02:42
<script> var zobrazena = "a"; // pomocna promenna, na zacatku nastavena na jmeno zobrazene polozky function zobraz(polozka){ document.getElementById('a').className = 'active'; document.getElementById('b').className = 'active'; document.getElementById('c').className = 'active'; document.getElementById('d').className = 'active'; if (document.getElementById){ document.getElementById(zobrazena).style.display = "none"; // skryje předchozí polozku document.getElementById(polozka).style.display = "block"; // zobrazi se nakliknuta polozka zobrazena = polozka; // aktualne zobrazena polozka se ulozi do globalni promenne, aby se pozdeji dala skryt return false; // odkaz neproklikne na href } </script> JS fakt nedělám, takže nevím :-) Ale asi budu muset udělat 4 (podmínky ?), něco takovýho? |
||
joe Profil |
#6 · Zasláno: 6. 3. 2009, 02:07:39
Už jsem ti to napsal ;-)
|
||
Daniel01 Profil |
#7 · Zasláno: 6. 3. 2009, 02:11:40
Sorry, byla přetížená diskuse, nějak to blbne... :-)
Ale nějak mi to nefunguje, pošlu tu celej kod :-) <script> var zobrazena = "a"; // pomocna promenna, na zacatku nastavena na jmeno zobrazene polozky function zobraz(polozka){ if (document.getElementById){ document.getElementById(zobrazena).style.display = "none"; // skryje předchozí polozku document.getElementById(zobrazena).className = ""; // odstrani tridu z puvodni polozky document.getElementById(polozka).style.display = "block"; // zobrazi se nakliknuta polozka document.getElementById(polozka).className = "active"; // nastavi tridu aktivni polozce zobrazena = polozka; // aktualne zobrazena polozka se ulozi do globalni promenne, aby se pozdeji dala skryt return false; // odkaz neproklikne na href } </script> <a href="#a" class="zalozka" onclick="return zobraz('a'); ">General</a> <a href="#b" class="zalozka" onclick="return zobraz('b'); ">Work</a> <a href="#c" class="zalozka" onclick="return zobraz('c'); ">Home</a> <a href="#d" class="zalozka" onclick="return zobraz('d'); ">Car</a> <div id="general_note"> <div id="a" class="polozka"> <?PHP mysql_connect mysql_select_db mysql_query("SET NAMES 'cp1250'"); mysql_query("SET CHARACTER SET 'cp1250'"); $pozn = mysql_query while ( $sloupec = MySQL_Fetch_Array($pozn) ) { ?> <form action="/index.php" method="POST"> <textarea class="ta_pozn" name="pole_pozn" cols="50" rows="10" wrap="soft"><?PHP echo $sloupec["*"]; ?></textarea> <br> <input type="submit" value="Save" class="save" /> </form> <?PHP } if ( strlen($do_dat) != 0 ) { echo "<span style='color: red;'><p><b>Note was save.</b></p></span>"; } ?> </div> <div id="b" class="polozka"> <a name="druha"></a> <h2>Nadpis druhé polo¾ky</h2> <p>Nìjaký libovolný text bla bla bla bla bla. Lorem ipsum dlouhý text. Vtip je v tom, že jsem poøád v tomtéž souboru. </div> <div id="c" class="polozka"> <a name="treti"></a> <h2>Tøetí odstavec</h2> <p>Obsahuje libovolný text, který se aktivuje po kliknutí na tøetí odkaz. </div> <div id="d" class="polozka"> <a name="treti"></a> <h2>ČTVTEK ODSTAVEC... :D:D:D</h2> <p>Obsahuje libovolný text, který se aktivuje po kliknutí na tøetí odkaz. </div> </div><!-- konec div#general_note --> |
||
Daniel01 Profil |
#8 · Zasláno: 6. 3. 2009, 02:13:51
Tohle jsem zkoušel i bez class jenom s id, aby JS mobhl přiřadit ty třídy... ale stejně to neudělal...
<a href="#a" class="zalozka" onclick="return zobraz('a'); ">General</a> <a href="#b" class="zalozka" onclick="return zobraz('b'); ">Work</a> <a href="#c" class="zalozka" onclick="return zobraz('c'); ">Home</a> <a href="#d" class="zalozka" onclick="return zobraz('d'); ">Car</a> |
||
joe Profil |
#9 · Zasláno: 6. 3. 2009, 02:22:23 · Upravil/a: joe
Nemáš nastavené id u odkazů.
<script type="text/javascript"> var zobrazena = "a"; function zobraz(polozka) { alert(zobrazena); if (document.getElementById) { document.getElementById(zobrazena).style.display = "none"; document.getElementById(zobrazena).className = "zalozka"; document.getElementById(polozka).style.display = "block"; document.getElementById(polozka).className = "zalozka active"; zobrazena = polozka; return false; } } </script> <a href="#a" id="a" class="zalozka" onclick="return zobraz('a'); ">General</a> <a href="#b" id="b" class="zalozka" onclick="return zobraz('b'); ">Work</a> <a href="#c" id="c" class="zalozka" onclick="return zobraz('c'); ">Home</a> <a href="#d" id="d" class="zalozka" onclick="return zobraz('d'); ">Car</a> |
||
_es Profil |
#10 · Zasláno: 6. 3. 2009, 08:11:43
Nebude jednoduchšie použiť onclick="return zobraz(this); " a spraviť to tak, aby nebolo treba použiť getElementById?
|
||
Daniel01 Profil |
#11 · Zasláno: 6. 3. 2009, 13:42:12 · Upravil/a: Daniel01
_es
Nebude jednoduchšie použiť onclick="return zobraz(this); " a spraviť to tak, aby nebolo treba použiť getElementById? Jestli mi napíšeš code, tak to bude super :D Jestli existuje nějaké jednodušší řešení, tak ho rád použiju... JS nedělám, tak fakt nevím :-D joe Nemáš nastavené id u odkazů. Vůbec nechápu tu logiku, ale zkusím to :-D Co mám napsat do CSS? Když kliknu na odkaz, zobrazí se mi JS alert, proč? A absolutně se mi to všechno rozkočí... Co tam dělá přesně to id="a, b, c, d"? To je něco jako name="a"? A nastylovat ten odkaz mám přes class="zalozka"? Když dělám v PHPčku, tak se můžu řídit pomocí výsledného zdrojáku, takhle nikoli.... Nebo můžete napsat funkční příklad a hodit ho na web? Díky moc... jinak to těžko pochopím :-) EDIT: už jsem si všiml toho alertu v tom codu.. :-) ten tam asi určitě nepatří, že? :D |
||
_es Profil |
#12 · Zasláno: 6. 3. 2009, 15:27:48 · Upravil/a: _es
Neviem, či je funkčnosť Joeho skriptu správna, no ak áno, rovnaký efekt by malo mať (bez alertu), netestoval som to:
<a href="#a" id="a" class="zalozka" onclick="return zobraz(this); ">General</a> <a href="#b" id="b" class="zalozka" onclick="return zobraz(this); ">Work</a> <a href="#c" id="c" class="zalozka" onclick="return zobraz(this); ">Home</a> <a href="#d" id="d" class="zalozka" onclick="return zobraz(this); ">Car</a> <script> var zobrazena = document.getElementById("a"); function zobraz(polozka) { zobrazena.style.display = "none"; zobrazena.className = "zalozka"; polozka.style.display = "block"; polozka.className = "zalozka active"; zobrazena = polozka; return false; } </script> |
||
joe Profil |
#13 · Zasláno: 6. 3. 2009, 15:38:54
_es
Tak to jsi to moc nezjednodušil :) Šlo by to tak, že odkazy obalíš divem, třeba s id="menu". Pak ty jednotlivé id u odkazů zase smažeš a zbytek necháš. JavaScript by pak měl být takhle, jenom mi to končí chybou už na prvním řádku - nevím proč. <script> var zobrazena = document.getElementById('menu').childNodes[0]; function zobraz(polozka) { zobrazena.className = "zalozka"; polozka.className = "zalozka active"; zobrazena = polozka; return false; } </script> Lepší by to bylo tak, že bys v HTML neměl žádný JS, jen bys přiřadil události odkazům v id="menu" divu, ale to je na delší vyprávění :) |
||
_es Profil |
#14 · Zasláno: 6. 3. 2009, 15:47:33 · Upravil/a: _es
joe
Len som chcel upozorniť, že je neefektívne volať funkciu z onclick s parametrom id prvku, keď je možné tam dať hneď ako parameter objekt prvku. Teda to bola len taká rýchla úprava tvojho skriptu, ani som veľmi neskúmal, čo vlastne ten tvoj skript robí. Len som ho zjednodušil, no nie veľmi, len trochu :) Ak máš chuť, môžeš to zjednodušiť ešte viac. |
||
Časová prodleva: 16 let
|
0