Autor Zpráva
Pavel Vodnář
Profil *
Dobrý den, potřeboval by jsem poradit jakým způsobem měnit obsah divu po kliku na odkaz

mám 3 odkazy: nápověda, registrace, přihlášení

potřebuji docílit toho že když kliknu na jakýkoliv odkaz bude se mi měnit obsah divu s dle příslušného odkazu.

Jak na to?

Děkuji Vám
kubik
Profil
Pomocí JavaScriptu:
document.getElementById("id_toho_divu").innerHTML = obsah;

Ty odkazy musí mít nastavenou příslušnou událost a asi by mohly být spíše tlačítky (input typu button).

Pomocí PHP:
<div><?php echo $obsah; ?></div>

Proměnná $obsah musí být naplněná podle odkazu.
Tori
Profil
Šlo by to i tak, že budete mít na stránce tři <div>y, a po kliknutí na patřičný odkaz/tlačítko/cokoli se (JavaScriptem) skryje aktuální div a zobrazí jiný (display: block/none). Jeden z nich by mohl být viditelný při načtení stránky, ostatní skryté.
Pavel Vodnář
Profil *
Vytvořil sem tento kód ale nepracuje mi:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<link href="css/hlavni.css" rel="stylesheet" type="text/css" media="screen" />
<title>sroty.cz - šrotařský server</title>
<body>
<div id="center">
<div id="toppanel"><div id="logo"></div> <p class="menu"><a href="napoveda.html">Nápověda</a> | <a href="index.php">Přihlášení</a> | <a href="register.php">Vytvořit účet</a></p> </div>
<div id="leftpanel"></div>

<div id="centerpanel"></div>

<div id="rightpanel"></div>
</div>


<script>
var nahled = document.getElementById("centerpanel").getElementsByTagName("a");
for(i = 0; i < nahled.length; i++)  {
  nahled[i].onclick = function () {
    document.getElementById("a") = this.href;
    document.getElementById("centerpanel").style.display = 'none';
   return false;
  }
}


</script>


</body>

</html>


Jak upravit javascript aby kdyz kliknu na odkaz napoveda, registrace nebo prihlaseni se mi meli prislusny obsah u <div id="centerpanel"> ?

Děkuji Vám

Moderátor panther: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na ).
_es
Profil
Pavel Vodnář:
Asi sa pokúšaš do toho divu načítať celý HTML kód z nejakého súboru.
No ak by si aj prišiel na to, ako to spraviť, tak to bude mať nevýhodu, že to bude nefunkčné bez JS.
Bez JS to bude funkčné, ak použiješ napríklad iframe, alebo normálne odkazy, ktoré načítajú znovu celú stránku.
kubik
Profil
Pokud chceš používat JavaScript, tak tam ty zdrojáky těch třech divů už musí být (přesněji asi vysloveně nemusí, ale je to jednodušší). Takže pro verzi s display: none:
<p class="menu">
<a onclick="document.getElementById('centerpanel-napoveda').style.display = 'block';
            document.getElementById('centerpanel-prihlaseni').style.display = 'none';
            document.getElementById('centerpanel-register').style.display = 'none';">Nápověda</a> | 
<a onclick="document.getElementById('centerpanel-napoveda').style.display = 'none';
            document.getElementById('centerpanel-prihlaseni').style.display = 'block';
            document.getElementById('centerpanel-register').style.display = 'none';">Přihlášení</a> | 
<a onclick="document.getElementById('centerpanel-napoveda').style.display = 'none';
            document.getElementById('centerpanel-prihlaseni').style.display = 'none';
            document.getElementById('centerpanel-register').style.display = 'block';">Vytvořit účet</a>
</p>

<div id="centerpanel-napoveda" style="display:none;">
Tady bude html kód té nápovědy.
</div>

<div id="centerpanel-prihlaseni" style="display:none;">
Tady bude html kód toho přihlášení.
</div>

<div id="centerpanel-register" style="display:none;">
Tady bude html kód té registrace.
</div>


Některý z těch divů může mít na začátek display: block.
Tori
Profil
kubik:
To je trochu "ukecané" řešení ... co třeba tohle:
<script>
var taby = new Array('centerpanel-napoveda', 'centerpanel-prihlaseni', 'centerpanel-register');

function prepni(id) {
  for (var i=0; i<taby.length; i++) {
    document.getElementById(taby[i]).style.display = (taby[i] == id ? 'block' : 'none');
  }
  return false;
}  
</script>

<a href="napoveda.html" onclick="return prepni('centerpanel-napoveda');">Div 1</a><br>
<a href="prihlaseni.html" onclick="return prepni('centerpanel-prihlaseni');">Div 2</a><br>
<a href="registrace.html" onclick="return prepni('centerpanel-register');">Div 3</a><br>

<div id="centerpanel-napoveda" style="display:none;">Prvni div.</div>
<div id="centerpanel-prihlaseni" style="display:none;">Druhy div.</div>
<div id="centerpanel-register">Treti div, ktery se zobrazi jako vychozi.</div>
Pokud je zapnutý JavaScript, přepínají se <div>y. Pokud je vypnutý, zobrazí se ten div, který nemá display:none, a odkazy odkazují, kam zadáte.
margin
Profil *
Tori:
Pokud je zapnutý JavaScript, přepínají se <div>y. Pokud je vypnutý, zobrazí se ten div, který nemá display:none
Což je prohřešek proti přístupnosti. Proto je dobré nastavit to JavaScriptem, při vypnutém JS bude vidět všechny DIVy.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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