Discussion :

[Tonii]

Bonjour j'ai un menu horizontal avec des onglets qui fonctionne très bien.

Dans chaque onglet j'ai des tableaux qui s'affichent très bien. Les onglets sont les mois de l'année.
Mon problème c'est que pour chaque tableau on peut faire un tri sur les colonnes, donc la page est reloadée et donc je retourne toujours sur le mios de janvier.
Voici mon code pour le menu:

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
 
<ul class="tabs">
    <li><a href="#janvier">Janvier</a></li>
	<li><a href="#fevrier">Fevrier</a></li>
	<li><a href="#mars">Mars</a></li>
	<li><a href="#avril">Avril</a></li>
	<li><a href="#mai">Mai</a></li>
	<li><a href="#juin">Juin</a></li>
	<li><a href="#juillet">Juillet</a></li>
	<li><a href="#aout">Aout</a></li>
	<li><a href="#septembre">Septembre</a></li>
	<li><a href="#octobre">Octobre</a></li>
	<li><a href="#novembre">Novembre</a></li>
	<li><a href="#decembre">Decembre</a></li>	
</ul>
<div class="tab_container">
    <div id="janvier" class="tab_content"> 
        <!--Content-->
		<?php
                    $mois = '01';
                        include("affiche_ecc.php");
                ?>
    </div>
    <div id="fevrier" class="tab_content"> 
        <!--Content-->
		<?php
                    $mois = '02';
                        include("affiche_ecc.php");     
                ?>
    </div>
	    <div id="mars" class="tab_content"> 
        <!--Content-->
		<?php
                    $mois = '03';               
            include("affiche_ecc.php");
                ?>
    </div>

Et le javascript qui gère le menu:

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
 
$(document).ready(function() {
 
	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
 
	//On Click Event
	$("ul.tabs li").click(function() {
 
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
 
		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});
 
});

Est-il possible de mettre un id, par exemple #fevrier au lieu de first dans $("ul.tabs li:first").addClass("active").show(); ? J'ai essayé sans succès...
Merci d'avance pour vos réponses...

[PP(Team)]

Bonjour,

Tu souhaites quelquechose comme ceci ?

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
 
<ul class="tabs">
    <li><a id="month_0" href="#janvier">Janvier</a></li>
	<li><a id="month_1" href="#fevrier">Fevrier</a></li>
	<li><a id="month_2" href="#mars">Mars</a></li>
	<li><a id="month_3" href="#avril">Avril</a></li>
	<li><a id="month_4" href="#mai">Mai</a></li>
	<li><a id="month_5" href="#juin">Juin</a></li>
	<li><a id="month_6" href="#juillet">Juillet</a></li>
	<li><a id="month_7" href="#aout">Aout</a></li>
	<li><a id="month_8" href="#septembre">Septembre</a></li>
	<li><a id="month_9" href="#octobre">Octobre</a></li>
	<li><a id="month_10" href="#novembre">Novembre</a></li>
	<li><a id="month_11" href="#decembre">Decembre</a></li>	
</ul>
<div class="tab_container">
    <div id="janvier" class="tab_content"> 
        <!--Content-->
		<?php
                    $mois = '01';
                        include("affiche_ecc.php");
                ?>
    </div>
    <div id="fevrier" class="tab_content"> 
        <!--Content-->
		<?php
                    $mois = '02';
                        include("affiche_ecc.php");     
                ?>
    </div>
	    <div id="mars" class="tab_content"> 
        <!--Content-->
		<?php
                    $mois = '03';               
            include("affiche_ecc.php");
                ?>
    </div>

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
 
$(document).ready(function() {
 
	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("#month_1").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
 
	//On Click Event
	$("ul.tabs li").click(function() {
 
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
 
		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});
 
});

Cordialement.

[Tonii]

Merci pour la réponse, je vais essayer en mettant l'ID dans le lien.

En fait quand un utilisateur clique sur un onglet, par exemple mars, il a le tableau du mois de mars. Mais s'il fait un tri sur une colone qu'il retombe sur mars avec le tableau trié et non qu'il retourne sur janvier comme c'est toujours le cas.