hide/show
ik heb totaal geen ervaring met Javascript en Jquery
ik ben 1ste jaars ICT student,
en ik wil graag leren hoe je een div kan hiden/showen
bij mouseover of mouseclick..
ik ben al lang aan het zoeken maar kom bij enorme lappen code waar ik zeker nog niks van snap...
kunnen jullie me helpen?
alvast bedankt!
Alleen hoe ga je 'm weer laten showen als je de div verbergt?
ik wil eigenlijk zoiets proberen:
link1
link2
link3
(bij klik op link1, verschijnt er tekst naast
bij klik op link 2, verdwijnt de tekst van link1, en komt er andere tekst
enzovoorts..)
dan moet je wel id's toevoegen aan de links, dus dan moet je this vervangen.
Maar hier een simple jquery scriptje http://www.learningjquery.com/2006/09/basic-show-and-hide, als eerst gevonden op google.
#infotekst 1{
}
hoe moet ik dat daar dan in verwerken?
Toevoeging op 19/11/2010 20:04:14:
Joey Drieling op 19/11/2010 20:01:58:
Weet niet wat jij krijgt maar lappen code lijkt me sterk, hoog uit paar regeltjes en met jquery valt het helemaal mee.
Maar hier een simple jquery scriptje http://www.learningjquery.com/2006/09/basic-show-and-hide, als eerst gevonden op google.
Maar hier een simple jquery scriptje http://www.learningjquery.com/2006/09/basic-show-and-hide, als eerst gevonden op google.
klopt, die had ik ook gevonden,
maar ik snap niet hoe ik dat zou moeten gebruiken :S?
Toevoeging op 19/11/2010 20:12:54:
ze hiden daar $('h1)
maar er staat: a div with class="showhide"
waar roepen ze die aan dan?
:S
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// basic show and hide
$(document).ready(function() {
$('#hide').click( function() {
$('div.showhide').hide();
});
$('#show').click( function() {
$('div.showhide').show();
});
$('#toggle').click( function() {
$('div.showhide').toggle();
});
});
// -->
</script>
<input type="submit" name="hideh1" value="Hide site tile" id="hide" />
<input type="submit" name="showh1" value="Show site title" id="show" />
<input type="submit" name="toggleh1" value="Toggle site title" id="toggle" />
<div class="showhide">Klik op de buttons en kijk wat er gebeurt!</div>
<script type="text/javascript">
<!--
// basic show and hide
$(document).ready(function() {
$('#hide').click( function() {
$('div.showhide').hide();
});
$('#show').click( function() {
$('div.showhide').show();
});
$('#toggle').click( function() {
$('div.showhide').toggle();
});
});
// -->
</script>
<input type="submit" name="hideh1" value="Hide site tile" id="hide" />
<input type="submit" name="showh1" value="Show site title" id="show" />
<input type="submit" name="toggleh1" value="Toggle site title" id="toggle" />
<div class="showhide">Klik op de buttons en kijk wat er gebeurt!</div>
Gewijzigd op 19/11/2010 20:38:49 door Joey Drieling
maar moet ik nu dan 3 divjes aanmaken?
met visibility: hidden;
?
onee wacht 1 divje,
#showhide {
}
toch?
Gewijzigd op 19/11/2010 20:31:02 door Jason van der Zeeuw
Als het eerst verborgen moet zijn wel anders niet.
het lukt al :)!
kan ik nu ook zoiets doen:
als ik op 1 knop klik komt de ene tekst
als ik op de andere klik moet die tekst sluiten, en een andere tekst komen..?
:)
Toevoeging op 19/11/2010 20:34:51:
dus als je op een knop drukt hide die alles behalve de bijbehorende div...
Ja laat div1 sluiten en div2 laaten zien.
ik ga even wat proberen :) bedankt tot zover!!!:D
iets van
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('#button_2').click( function() {
$('div.hide_all').hide();
$('div.#div_2').show();
});
});
// -->
</script>
<button id="button_1">button 1</button>
<button id="button_2">button 2</button>
<button id="button_3">button 3</button>
<div class="hide_all" id="div_1">div 1</div>
<div class="hide_all" id="div_2">div 2</div>
<div class="hide_all" id="div_3">div 3</div>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('#button_2').click( function() {
$('div.hide_all').hide();
$('div.#div_2').show();
});
});
// -->
</script>
<button id="button_1">button 1</button>
<button id="button_2">button 2</button>
<button id="button_3">button 3</button>
<div class="hide_all" id="div_1">div 1</div>
<div class="hide_all" id="div_2">div 2</div>
<div class="hide_all" id="div_3">div 3</div>
Gewijzigd op 19/11/2010 20:47:46 door Joey Drieling
aan het begin staan alle divjes zichtbaar
kan je ze ook aan het begin standaard onzichtbaar maken?
Gewijzigd op 19/11/2010 20:51:04 door Joey Drieling
als ik visibility hidden doe, worden ze helemaal niet meer zichtbaar..
Ja okay ik wist het ook niet zeker zet ze alles op hide met jquery zelf anders.
ik weet dat ik nogal moeilijk ben, aangezien ik er nog niks van snap (A)
Okay geeft niet graag gedaan ;)
each iterator
Dit kan natuurlijk beter met de Die is nog beeter ja dit kon ik ff snel bedenken, en ik gebruik jquery zelf ook maar pas en die kon ik nog niet. maar zo zie je maar je leert elke dag weer wat ;)