Garder l'onglet sélectionné lors du rechargement de la page

**boboss123** · 04/04/2013, 15h26

bonjour,

Voici une simple page de test avec des tab utilisant bootstrap + jQuery + plugin boostrap jQuery

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
40
41
42
43
<!DOCTYPE HTML>
 
<!-- page test_tab.htm -->
 
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
</head>
 
<body>
	<div class="container">
 
		<div class="navbar">
			<div class="navbar-inner">
				<ul class="nav">
					<li class="active"><a href="test_tab.htm">Page En cours</a></li>
					<li><a href="page2.htm">Page 2</a></li>
					<li><a href="page3.htm">Page 3</a></li>
				</ul>
			</div>
		</div>
 
		<ul class="nav nav-tabs">
			<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
			<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
			<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
		</ul>
 
		<div class="tab-content">
			<div class="tab-pane active" id="tab1">Selection Tab 1</div>
			<div class="tab-pane" id="tab2">Selection Tab 2</div>
			<div class="tab-pane" id="tab3">Selection Tab 3</div>
		</div>
	</div>	
 
 
	<!-- -------------------------------------- -->
	<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>	
</body>
</html>

Dans la navbar, si je clique sur la page déjà sélectionnée, ça me re-selectionne automatiquement le premier tab.
=> Est-il possible de faire en sorte que ça me garde l'onglet précédemment sélectionné lors du rechargement de la page ?

Merci d'avance,

**Lorenzo77** · 04/04/2013, 21h38

salut,

c'est possible, l'idée est ici :
http://www.developpez.net/forums/d13...enu-deroulant/
la seule différence c'est que le sujet parle d'un menu vertical mais le principe est le meme avec un menu a onglet

**boboss123** · 05/04/2013, 10h10

salut,

Je ne suis pas sur d'avoir compris le fonctionnement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
</head>
 
<body>
	<div class="container">
 
		<div class="navbar">
			<div class="navbar-inner">
				<ul class="nav">
					<li class="active"><a id="nav_selected" href="test_tab.htm">Page En cours</a></li>
					<li><a href="page2.htm">Page 2</a></li>
					<li><a href="page3.htm">Page 3</a></li>
				</ul>
			</div>
		</div>
 
		<ul class="nav nav-tabs">
			<li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
			<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
			<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
		</ul>
 
		<div class="tab-content">
			<div class="tab-pane active" id="tab1">Selection Tab 1</div>
			<div class="tab-pane" id="tab2">Selection Tab 2</div>
			<div class="tab-pane" id="tab3">Selection Tab 3</div>
		</div>
	</div>	
 
	<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
 
	<script>
	$(document).ready(function() {
		alert(window.location.href);
 
		//$('a[data-toggle="tab"]').on('show', function (e) {
		//	$("#nav_selected").attr("href", $(this).attr("href"));
		// => ne fonctionne pas : la page n'est pas rechargée lorsqu'on clic sur #nav_selected
		//});
	})();
	</script>
</body>
</html>

=> le href affiché est toujours le même (quelque soit l'onglet sélectionné)

**boboss123** · 05/04/2013, 11h43

J'ai réussi a faire un système qui fonctionne sous firefox mais pas sous IE8 (en plus ça semble poser des problème en cas de POST => non testé):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
</head>
 
<body>
	<div class="container">
 
		<div class="navbar">
			<div class="navbar-inner">
				<ul class="nav">
					<li class="active"><a id="nav_selected" href="#">Page En cours</a></li>
					<li><a href="page2.htm">Page 2</a></li>
					<li><a href="page3.htm">Page 3</a></li>
				</ul>
			</div>
		</div>
 
		<ul id="nav-tab1" class="nav nav-tabs">
			<li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
			<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
			<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
		</ul>
 
		<div class="tab-content">
			<div class="tab-pane" id="tab1">Selection Tab 1</div>
			<div class="tab-pane" id="tab2">Selection Tab 2</div>
			<div class="tab-pane" id="tab3">Selection Tab 3</div>
		</div>
	</div>	
 
	<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
 
	<script>
	$(document).ready(function() {
		alert(window.location.href);
 
		var str = window.location.href.split("#")[1];
		//alert(str);
		if(str === undefined){
			$('#nav-tab1 a[href="#tab1"]').tab('show');
		} else {
			$('#nav-tab1 a[href="#' + str + '"]').tab('show');
		}
 
		//$('a[data-toggle="tab"]').on('show', function (e) {
		//	$("#nav_selected").attr("href", $(this).attr("href") + "?1");
		//	// => fonctionne pas : la page n'est pas rechargée lorsqu'on clic sur #nav_selected
		//});
 
		$('.navbar .active a').click(function(){
 
			//alert(str);
			//alert($("#nav-tab1 .active a").attr("href"));
 
			var ancre = $("#nav-tab1 .active a").attr("href");
			window.location.href = window.location.href.split("#")[0] + ancre;
			//alert("1: " + window.location.href);
 
			// force le rechargement de la page
			//window.location = window.location; // marche pas
			//window.location.assign(window.location.href); // marche pas
			window.location.reload(); // pose des problèmes en cas de POST (redemande si on veut renvoyer les données)
		});
 
	});
	</script>
</body>
</html>

Garder l'onglet sélectionné lors du rechargement de la page

jQuery

Vue hybride

Discussions similaires

Partager

Partager