Actieve tab opslaan in cookie
Ik heb een site gemaakt met daarop 4 tabs met daarin allerlei content. Als een gebruiker op een item klikt en naar die pagina gebracht wordt, zou die bij terugkeer door bv. backspace, opnieuw op de tab moeten terechtkomen vanwaar ie kwam. Daarvoor heb ik dus cookies nodig, maar het gaat m'n petje een beetje te boven...
I guess...
- Dat ik dezedeze plugin nodig heb.
- Dit
$.cookie('active_tab', rel);
na (this)on.click moet plaatsen.
- Met jquery de actieve tab aanduiden?
Kan iemand een handje helpen?
Het tabscript:
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
$('ul.tabs').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e){
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
[/CODE]
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e){
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
[/CODE]
Gewijzigd op 10/01/2013 13:20:10 door Toilet Seat
Gewijzigd op 10/01/2013 13:39:52 door Kris Peeters
<ul class="navigatielinks">
<li id="nav1" class="newww"><a href='#tab1' class="navvv12"><span>Nieuw</span></a></li>
<li id="nav2" class="top"><a href='#tab2'>Top</a></li>
<li id="nav3" class="hot"><a href='#tab3'>Hot</a></li>
<li id="nav4" class="not"><a href='#tab4'>Not</a></li>
</ul>
En de tabs zijn dan gewoon:
<div="tab1">
content
</div>
En dat vier keer.
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
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
$('ul.tabs').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e){
e.preventDefault();
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
//hier het koekje...
$.cookie('active_tab', rel); // hoe dat werkt zelf uitvogelen
});
});
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e){
e.preventDefault();
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
//hier het koekje...
$.cookie('active_tab', rel); // hoe dat werkt zelf uitvogelen
});
});
in javascript $var is niet nodig..gewoon var is voldoende (geen dollarteken dus...)
$(this).on(); kan gechained worden...$('ul.tabs').each(function(){}).on("click", function(){});
$('ul.tabs') selecteerd namelijk in eenkeer alle ul.tabs, maar dat heb je wss wel begrepen met de each ;) iedere functie die je dus doet wordt uitgevoerd op alle elementen die voldoen aan die voorwaarden...
Toilet Seat op 10/01/2013 13:16:21:
... bv. backspace, opnieuw op de tab moeten terechtkomen vanwaar ie kwam. Daarvoor heb ik dus cookies nodig...
Zeg, ik weet daar iets anders voor.
Deze jongens hebben een plugin geschreven die reageert op een verandering van de url na de #.
( in de code laat ik de plugin hosten vanuit https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js )
Dat werkt ook bij de "terug knop" of backspace (of wat ook de oorzaak moge zijn voor de veranderde url).
Ik heb die plugin gezocht omwille van exact de zelfde reden (wel een andere toepassing) als jij.
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
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
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js"></script>
<script>
$(document).ready(function() {
// controle tabs
$('ul.tabs').each(function() {
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e) {
// e.preventDefault(); // ik zou niet weten waarom; zolang je in de href niets zet links van de #
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
});
});
// lezen van de hash, bij gelijk welke verandering. Op basis daarvan gaan we een click op de link induceren
// in jouw geval is het vrij simpel, aangezien die hash letterlijk is wat in de href staat
$(window).hashchange( function(){
//
var hash = window.location.hash;
$('a[href="' + hash + '"]').click();
});
});
</script>
<script src="https://raw.github.com/cowboy/jquery-hashchange/v1.3/jquery.ba-hashchange.js"></script>
<script>
$(document).ready(function() {
// controle tabs
$('ul.tabs').each(function() {
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e) {
// e.preventDefault(); // ik zou niet weten waarom; zolang je in de href niets zet links van de #
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
});
});
// lezen van de hash, bij gelijk welke verandering. Op basis daarvan gaan we een click op de link induceren
// in jouw geval is het vrij simpel, aangezien die hash letterlijk is wat in de href staat
$(window).hashchange( function(){
//
var hash = window.location.hash;
$('a[href="' + hash + '"]').click();
});
});
</script>
Toilet Seat op 10/01/2013 14:00:20:
<ul class="navigatielinks">
Je bedoelt <ul class="tabs"> , veronderstel ik
Gewijzigd op 10/01/2013 15:39:26 door Kris Peeters
Quote:
if (localStorage.getItem("active") == "1") {
window.location.animate.assign("#tab2");
}
else if (localStorage.getItem("active") == "2") {
window.location.animate.assign("#tab3");
}
else if (localStorage.getItem("active") == "3") {
window.location.animate.assign("#tab4");
}
else if (localStorage.getItem("active") == "#") {
window.location.animate.assign("#");
}
window.location.animate.assign("#tab2");
}
else if (localStorage.getItem("active") == "2") {
window.location.animate.assign("#tab3");
}
else if (localStorage.getItem("active") == "3") {
window.location.animate.assign("#tab4");
}
else if (localStorage.getItem("active") == "#") {
window.location.animate.assign("#");
}
En dan aan iedere tab onclick de desbetreffende waarde meegeven aan localStorage.
Ik had een oplossing nodig voor ongeveer hetzelfde probleem en kwam zo op dit topic.
Ik ben bezig met het verbouwen van een al bestaande website, de oorspronkelijke tabs heb ik dus ook niet zelf gemaakt.
T gaat mij er vooral om dat het linken naar een bepaalde tab werkt, het werkte uiteraard op de pagina zelf al, maar vanaf een ander deel van de website nog niet (kwam standaard op tablad 1)
Nu ben ik even bezig geweest met het hashchange scriptje wat kris postte, en het gaat nu bijna goed (op een misschien wat omslachtige manier). Het linken van buiten de pagina werkt, maar nog niet naar wens.
Het enige wat nog mis gaat is dat de pagina automatisch een stukje naar onderen verspringt na het aanklikken van een tab, en mn tabs worden nog niet active.
Nu gebruik ik zelf eigenlijk nooit tabs en ben ik ook een broekie op gebied van javascript dus zal het waarschijnlijk gewoon iets "idioots" in mn code zijn, vandaar mijn schreeuw om hulp :)
Ik heb een deel van mijn code even op pastebin gezet omdat anders mn post wel erg groot wordt. http://pastebin.com/mMXCmmXk
site waar het om gaat: http://bit.ly/107Lath
voorbeeld van hoe ze eerst werktte: http://bit.ly/RYSkMz
Alvast onwijs bedankt!
EDIT : als ik de comments //e.preventDefault(); hier weg haal dan verspringt ie niet meer maar dan werkt ook meteen het doorlinken vanaf een ander deel van de site niet meer.
Gewijzigd op 15/01/2013 21:51:24 door Rico van P