| Autor | Zpráva | ||
|---|---|---|---|
| Pavel Vodnář Profil * |
#1 · Zasláno: 16. 1. 2011, 21:38:40
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 |
#2 · Zasláno: 16. 1. 2011, 22:47:07
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 |
#3 · Zasláno: 16. 1. 2011, 22:53:46
Š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 |
#5 · Zasláno: 17. 1. 2011, 13:09:42 · Upravil/a: _es
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 |
#6 · Zasláno: 17. 1. 2011, 15:06:38
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 |
#7 · Zasláno: 17. 1. 2011, 15:53:43
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>
|
||
| margin Profil * |
#8 · Zasláno: 17. 1. 2011, 23:28:04
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. |
||
|
Časová prodleva: 13 let
|
|||
0