JQuery met een if en else
Oke, ben dus met een site bezig met jquery, nu wil ik dat mijn menu een p element laat zien, als een menu item met het corresponderende id wordt geklikt. hier is mijn setup:
Jquery(if werkt niet):
menu:
P elementen:
Hoe zou ik dit beter kunnen doen? En waarom werkt mijn if statement niet?
Jquery(if werkt niet):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("a.menuitem").click(function(event){
$("a.menuitem").removeClass("selected");
$(this).addClass("selected");
if($("a.menuitem").id == "home")
{
$("p.body").addClass("hidden");
$("p.body#home").removeClass("hidden");
}
if($("a.menuitem").id == "about")
{
$("p.body").addClass("hidden");
$("p.body#about").removeClass("hidden");
}
event.preventDefault();
});
$("a.menuitem").removeClass("selected");
$(this).addClass("selected");
if($("a.menuitem").id == "home")
{
$("p.body").addClass("hidden");
$("p.body#home").removeClass("hidden");
}
if($("a.menuitem").id == "about")
{
$("p.body").addClass("hidden");
$("p.body#about").removeClass("hidden");
}
event.preventDefault();
});
menu:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<ul>
<li><a href="" class="menuitem" id="home">Home</a></li>
<li><a href="" class="menuitem" id="about">About</a></li>
<li><a href="" class="menuitem" id="contact">Contact</a></li>
<li><a href="" class="menuitem" id="gallery">Gallery</a></li>
<li><a href="" class="menuitem" id="scripts">Scripts</a></li>
<li class="last"><a href="" class="menuitem" id="links">Links</a></
li>
<div class="clear"></div>
</ul>
<li><a href="" class="menuitem" id="home">Home</a></li>
<li><a href="" class="menuitem" id="about">About</a></li>
<li><a href="" class="menuitem" id="contact">Contact</a></li>
<li><a href="" class="menuitem" id="gallery">Gallery</a></li>
<li><a href="" class="menuitem" id="scripts">Scripts</a></li>
<li class="last"><a href="" class="menuitem" id="links">Links</a></
li>
<div class="clear"></div>
</ul>
P elementen:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<p class="body" id="home">
ALL YOUR DATABASE ARE BELONG TO US.OUR DATABASE ARE BELONG TO US.
US.
</p>
<p class="body hidden" id="about">
Just a test.
</p>
ALL YOUR DATABASE ARE BELONG TO US.OUR DATABASE ARE BELONG TO US.
US.
</p>
<p class="body hidden" id="about">
Just a test.
</p>
Hoe zou ik dit beter kunnen doen? En waarom werkt mijn if statement niet?
Gewijzigd op 01/01/1970 01:00:00 door Stefan
ik weet niet zeker, maar volgens mij is dit fout : "a.menuitem"
Dit betekend: <a href="" id="menuitem"></a>
Dit betekend: <a href="" id="menuitem"></a>
Nee, . geeft aan dat het een class is.
EDIT. Gefixd, alleen nog wat problemen met content switching.
hij switch wel naar about, maar als je danw eer op home clickt, switch ie niet terug naar de home content.
Iemand een oplossing?
EDIT. Gefixd, alleen nog wat problemen met content switching.
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<script>
$(document).ready(function(){
$("li").hide()
$("p.subtitle").hide()
$("p.copy").hide()
$("p[id=about]").hide()
var $i=500;
$("li:eq(0)").show($i, function(event){
// use callee so don't have to name the function
$i = $i+150;
$(this).next().show($i, arguments.callee, function(event){
});
$("p.subtitle").show(5250)
$("p.copy").show(5250)
});
$("a.menuitem").click(function(event){
$("a.menuitem").removeClass("selected");
$(this).addClass("selected");
if($("a.menuitem[id=home]"))
{
$("p.body").hide();
$("p.body[id=home]").show();
}
if($("a.menuitem[id=about]"))
{
$("p.body").hide();
$("p.body[id=about]").show();
}
event.preventDefault();
});
});
</script>
$(document).ready(function(){
$("li").hide()
$("p.subtitle").hide()
$("p.copy").hide()
$("p[id=about]").hide()
var $i=500;
$("li:eq(0)").show($i, function(event){
// use callee so don't have to name the function
$i = $i+150;
$(this).next().show($i, arguments.callee, function(event){
});
$("p.subtitle").show(5250)
$("p.copy").show(5250)
});
$("a.menuitem").click(function(event){
$("a.menuitem").removeClass("selected");
$(this).addClass("selected");
if($("a.menuitem[id=home]"))
{
$("p.body").hide();
$("p.body[id=home]").show();
}
if($("a.menuitem[id=about]"))
{
$("p.body").hide();
$("p.body[id=about]").show();
}
event.preventDefault();
});
});
</script>
hij switch wel naar about, maar als je danw eer op home clickt, switch ie niet terug naar de home content.
Iemand een oplossing?
Gewijzigd op 01/01/1970 01:00:00 door Stefan
Waarom staat er eerst een tekstje in het engels.
Foutje, was van de google group voor jquery gekopieerd.
Gefixd:
Gefixd:
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
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
$(document).ready(function(){
$("li").hide()
$("p.subtitle").hide()
$("p.copy").hide()
$("p[name!=home][class=body]").hide()
var $i=500;
$("li:eq(0)").show($i, function(event){
// use callee so don't have to name the function
$i = $i+150;
$(this).next().show($i, arguments.callee, function(event){
});
$("p.subtitle").show(5250)
$("p.copy").show(5250)
});
$("a.menuitem").click(function(event){
$("a.menuitem").removeClass("selected");
$(this).addClass("selected");
$("p[name!="+this.id+"][class=body]").hide(500)
$('p[name='+this.id+']').show(500)
event.preventDefault();
});
});
</script>
$(document).ready(function(){
$("li").hide()
$("p.subtitle").hide()
$("p.copy").hide()
$("p[name!=home][class=body]").hide()
var $i=500;
$("li:eq(0)").show($i, function(event){
// use callee so don't have to name the function
$i = $i+150;
$(this).next().show($i, arguments.callee, function(event){
});
$("p.subtitle").show(5250)
$("p.copy").show(5250)
});
$("a.menuitem").click(function(event){
$("a.menuitem").removeClass("selected");
$(this).addClass("selected");
$("p[name!="+this.id+"][class=body]").hide(500)
$('p[name='+this.id+']').show(500)
event.preventDefault();
});
});
</script>
Gewijzigd op 01/01/1970 01:00:00 door Stefan




