Autor Zpráva
Daniel01
Profil
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
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
<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
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
<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
Už jsem ti to napsal ;-)
Daniel01
Profil
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
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
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
Nebude jednoduchšie použiť onclick="return zobraz(this); " a spraviť to tak, aby nebolo treba použiť getElementById?
Daniel01
Profil
_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
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
_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
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.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: