| Schrijver |
Bericht |
Jordy8
Forum Lid
142 posts |
# Geplaatst: 31 Okt 2009 19:12
Hallo,
Ik zou graag een nieuwsscript hebben met bovenaan 4 titels. Als daar op geklikt wordt dan komt er onder de 4 titels (dus niet onder de titel zelf, maar onder ALLE titels) een bericht te staan met de inhoud. Als er op een andere titel wordt geklikt, komt er een ander nieuwsbericht tevoorschijn dat de oude vervangt. Dus niet dat alle 4 de berichten open kunnen staan. Kan iemand mij hier mee helpen?
Ik heb al op Google gezocht en op forums gekeken, maar daar worden alleen andere versies in besproken.
|
| |
|
Vinzent
Forum Lid
43 posts |
# Geplaatst: 3 Nov 2009 20:15
html code<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function showit(text){
document.getElementById('textr').style.visibility = 'visible';
if(text==1){
document.getElementById('text').innerHTML = 'text1';
}else if(text==2){
document.getElementById('text').innerHTML = 'text2';
}else if(text==3){
document.getElementById('text').innerHTML = 'text3';
}else if(text==4){
document.getElementById('text').innerHTML = 'text4';
}
}
</script>
</head>
<body>
<table width="460" border="0">
<tr onclick="showit('1');">
<td>TITEL 1</td>
</tr>
<tr onclick="showit('2');">
<td>TITEL 2</td>
</tr>
<tr onclick="showit('3');">
<td>TITEL 3</td>
</tr>
<tr onclick="showit('4');">
<td>TITEL 4</td>
</tr>
<tr id="textr" style="visibility:collapse;">
<td id="text"></td>
</tr>
</table>
</body>
</html>
Greetz!
|
Jordy8
Forum Lid
142 posts |
# Geplaatst: 5 Nov 2009 19:17
Bedankt, en hoe voeg ik een decoratie zoals dit toe bij mouseover:
onmouseover="this.style.textDecoration='underline'; this.style.cursor='hand'"
Waar moet ik dat neerzetten?
|
Superkluns
Forum Lid
751 posts |
# Geplaatst: 5 Nov 2009 23:01
Mouseovers kun je het beste regelen met css.
Al heet het daar hover.
google maar eens op 'css hover' en dan kom je er wel denk ik.
|
Jordy8
Forum Lid
142 posts |
# Geplaatst: 6 Nov 2009 15:13
En nog een vraag.
Als je de pagina bezoekt zie je geen nieuwsbericht, alleen als je op een titel klikt. Hoe kan ik er voor zorgen dat standaard titel 1 met inhoud te zien is?
|
DNA
Forum Lid
7741 posts |
# Geplaatst: 6 Nov 2009 15:21
uuh...het bericht gewoon helemaal plaatsen? :p
|
Superkluns
Forum Lid
751 posts |
# Geplaatst: 6 Nov 2009 16:33 · Aangepast door: Superkluns
of als je daar geen zin in heb, de body-begintag vervangen door:
html code<body onload="showit(1)">
(of een ander nummer, ligt eraan)
edit:
mijn persoonlijke mening is, dat ikzelf een ander script zou schrijven. Ik vind het een beetje onhandig als alle tekst van ieder bericht in de javascript staat. Hou ik het zou doen is zo:
html code<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function showit(text) {
var textall = document.getElementById('textall').getElementsByTagName('div');
for(i=0; i<textall.length; i++) {
textall[i].style.display = 'none';
}
document.getElementById('text'+text).style.display = 'block';
}
</script>
<style>
#texten {
/*style van het blok waar de tekst in zit*/
}
.text {
display:none;
}
</style>
</head>
<body onload="showit(0)">
<ul>
<li><a href="#" onClick="showit(0)">Link text0</a></li>
<li><a href="#" onClick="showit(1)">Link text1</a></li>
<li><a href="#" onClick="showit(2)">Link text2</a></li>
<li><a href="#" onClick="showit(3)">Link text3</a></li>
</ul>
<div id="textall">
<noscript>U moet javascript aan hebben staan!!</noscript>
<div id="text0" class="text">
text0
</div>
<div id="text1" class="text">
text1
</div>
<div id="text2" class="text">
text2
</div>
<div id="text3" class="text">
text3
</div>
</div>
</body>
</html>
nog een tekst toevoegen? maak in de textall-div een div aan met de nieuwe tekst, met als id 'test'+een nummer hoger.
|
