Tijden veranderen
[Opgelost] Jquery probleem
@Wouter J,
Het was inderdaad een typfout, stom van me!
Code (php)
1
2
3
2
3
$('a').click(function(){
$(this).attr('href','een_andere_link.php');
});
$(this).attr('href','een_andere_link.php');
});
Erwin H op 19/03/2012 13:01:15:
door het href attribuut aan te passen.
Code (php)
1
2
3
2
3
$('a').click(function(){
$(this).attr('href','een_andere_link.php');
});
$(this).attr('href','een_andere_link.php');
});
Zou je hem misschien iets meer uit kunnen leggen? :$
Dus eerst bijvoorbeeld:
Code (php)
1
<a href="link_naar_een_pagina.php">de link</a>
En na het klikken op de knop:
Code (php)
1
<a href="een_andere_link.php">de link</a>
Dat kan je dus doen met de code die ik je eerst gaf. Als je dat in de click handler van de button plaatst dan verander je het href attribute van een link en daarmee de pagina waar de link naar verwijst. Let wel op dat ik het heb gebonden aan alle anchor ("a") tags, normaal zal je dit willen binden aan maar een paar links middels een class of id.
Is dit niet wat je wilt, dan zal je het iets beter moeten uitleggen.
Ik heb nu deze dingen in mijn menulijst staan:
<ul>
<li><a href="index">Home</a></li>
<li><a href="Portfolio">Portfolio</a></li>
<li><a href="CV">CV</a></li>
<li><a href="Contact">Contact</a></li>
</ul>
wanneer ik bijvoorbeeld op portfolio klik blijft er index.php staan. Dit moet dan automatisch in de link veranderen, zodat je bijvoorbeeld index.php#portfolio, of nog liever geen index.php meer (bij elke link) en dan gewoon #index, #portfolio, #cv en #contact. Dit wil ik zodat je history in je browser heb een een pagina kan bookmarken.
Youri S op 19/03/2012 12:34:57:
... de link aan te passen naar bijvoorbeeld: http://test.nl/#home? ...
Ja, dat kan.
Maar die constructie staat er niet op 1 2 3
Wat je moet doen:
- je maakt links met een formaat dat er als volgt uit ziet:
<a href="#kalender">Kalender</a>
<a href="#gastenboek">Gastenboek</a>
Wanneer de gebruiker op een link klikt, verandert de url aan de linkerkant van het #-karakter niet, dus wordt de pagina niet verlaten.
- Dan moet je zien dat een javascript-callback getriggerd wordt telkens de url aan de rechterkant van het #-karakter veranderd is.
Zoals je onclick, onchange, onblur, ... hebt, heb je dus eigenlijk een onHashChanged nodig.
Wel, die jQuery-plugin bestaat; je vindt ze hier:
http://benalman.com/projects/jquery-hashchange-plugin/
In de callback kan je dan de juiste acties ondernemen, bv. met een switch.
Iets als:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
...
$(window).hashchange( function(){
switch(location.hash) {
case '#kalender':
// doe hier wat je moet doen wanneer de gebruiker op kalender klikt
break;
case '#gastenboek':
// ...
break;
...
}
})
$(window).hashchange( function(){
switch(location.hash) {
case '#kalender':
// doe hier wat je moet doen wanneer de gebruiker op kalender klikt
break;
case '#gastenboek':
// ...
break;
...
}
})
Gewijzigd op 19/03/2012 18:21:30 door Kris Peeters
$(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
// Iterate over all nav links, setting the "selected" class as-appropriate.
$('#nav a').each(function(){
var that = $(this);
that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
});
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});
Hoe kan ik dat dan laten werken met deze code, en heb ik nog extra pagina's nodig?
$(document).ready(function(){
// initial
$('#content').load('content/index.php');
// handle menu clicks
$('#navBar ul li ').click(function(){
var page = $(this).children('a').attr('href');
$('#content').load('content/'+ page +'.php');
return false;
});
});
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
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
<html>
<head>
</head>
<body>
<ul id="navBar">
<li><a href="#index">Home</a></li>
<li><a href="#about">About us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js"></script>
<script>
function loadPage(page) {
var file = 'content/' + page + '.php';
$('#content').load(file);
}
$(document).ready(function() {
// initial
loadPage('index');
$(window).hashchange(function() {
var hash = location.hash;
if (hash != '') {
loadPage(hash.substr(1));
}
else {
loadPage('index');
}
});
});
</script>
</body>
</html>
<head>
</head>
<body>
<ul id="navBar">
<li><a href="#index">Home</a></li>
<li><a href="#about">About us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js"></script>
<script>
function loadPage(page) {
var file = 'content/' + page + '.php';
$('#content').load(file);
}
$(document).ready(function() {
// initial
loadPage('index');
$(window).hashchange(function() {
var hash = location.hash;
if (hash != '') {
loadPage(hash.substr(1));
}
else {
loadPage('index');
}
});
});
</script>
</body>
</html>
Kris Peeters op 20/03/2012 14:45:21:
Dit zou moeten werken bij jou
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
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
<html>
<head>
</head>
<body>
<ul id="navBar">
<li><a href="#index">Home</a></li>
<li><a href="#about">About us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js"></script>
<script>
function loadPage(page) {
var file = 'content/' + page + '.php';
$('#content').load(file);
}
$(document).ready(function() {
// initial
loadPage('index');
$(window).hashchange(function() {
var hash = location.hash;
if (hash != '') {
loadPage(hash.substr(1));
}
else {
loadPage('index');
}
});
});
</script>
</body>
</html>
<head>
</head>
<body>
<ul id="navBar">
<li><a href="#index">Home</a></li>
<li><a href="#about">About us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js"></script>
<script>
function loadPage(page) {
var file = 'content/' + page + '.php';
$('#content').load(file);
}
$(document).ready(function() {
// initial
loadPage('index');
$(window).hashchange(function() {
var hash = location.hash;
if (hash != '') {
loadPage(hash.substr(1));
}
else {
loadPage('index');
}
});
});
</script>
</body>
</html>
Dat werkt perfect :D. Bedankt! Het enige dat er nu nog inzit is wanneer je op f5 drukt bij bijvoorbeeld contact, dat hij dan wel naar home gaat. Is hier ook nog iets voor?
<li><a href="contact">Content</a></li>
(zie jouw eerste post)
Dus ja ... ofwel alles (href link, caption link, php file) op contact zetten ofwel op content
EDIT:
Doe dit eens
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
function loadPage(page) {
var file = 'content/' + page + '.php';
$('#content').load(file);
}
function hashChanged() {
var hash = location.hash;
if (hash != '') {
loadPage(hash.substr(1));
}
else {
loadPage('index');
}
}
$(document).ready(function() {
// initial
hashChanged();
$(window).hashchange(function() {
hashChanged();
});
});
</script>
function loadPage(page) {
var file = 'content/' + page + '.php';
$('#content').load(file);
}
function hashChanged() {
var hash = location.hash;
if (hash != '') {
loadPage(hash.substr(1));
}
else {
loadPage('index');
}
}
$(document).ready(function() {
// initial
hashChanged();
$(window).hashchange(function() {
hashChanged();
});
});
</script>
Gewijzigd op 20/03/2012 15:09:56 door Kris Peeters
Het enige dat er nu nog inzit is wanneer je op f5 drukt bij bijvoorbeeld contact, dat hij dan wel naar home gaat. Is hier ook nog iets voor?
Kris Peeters op 20/03/2012 15:11:42:
vorige post aangepast ...
Bedankt, werkt nu helemaal perfect :)