Discussion :

[stevench]

Bonjour,

Voilà mon souci, j'utilise Tabslet jQuery plugin pour afficher des tabs en mode "autorotate", ce que je voudrais c'est ajouter une class "active" sur la balise lien lorsque une tab est actuellement sélectionnée.

voici la structure du code html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class='tabs tabs_animate'>
<div id='tab-1'>Contenu</div>
<div id='tab-2'>Contenu</div>
<div id='tab-3'>Contenu</div>
<ul class='horizontal'>
    <li class="case1"><a href="#tab-1">Lien</a></li>
    <li class="case2"><a href="#tab-2">Lien</a></li>
    <li class="case3"><a href="#tab-3">Lien</a></li>
</ul>
</div>

Code javascript :

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
(function($,window,undefined){
 
$.fn.tabslet=function(options){
var defaults={
mouseevent:"click",
attribute:"href",
animation:true,
autorotate:true,
delay:3000,
active:1,
controls:{prev:".prev",next:".next"}};
 
var options=$.extend(defaults,options);
$(this).each(function(){var $this=$(this);
$this.find("> div").hide();
$this.find("> div").eq(options.active-1).show();
$this.find("> ul li").eq(options.active-1).addClass("active");
 
var fn=eval(function(){$(this).trigger("_before");
$this.find("> ul li").removeClass("active");$(this).addClass("active");
$this.find("> div").hide();
 
var currentTab=$(this).find("a").attr(options.attribute);
 
if(options.animation){$this.find(currentTab).animate({opacity:"show"},"slow",
 
function(){$(this).trigger("_after")})}
else{$this.find(currentTab).show();
$(this).trigger("_after")}return false});
 
var init=eval("$this.find('> ul li')."+options.mouseevent+"(fn)");init;
var elements=$this.find("> ul li"),i=options.active-1;
 
function forward(){i=++i%elements.length;options.mouseevent=="hover"?elements.eq(i).trigger("mouseover"):elements.eq(i).click();
var t=setTimeout(forward,options.delay);
$this.mouseover(function(){clearTimeout(t)})}
 
if(options.autorotate){setTimeout(forward,0)}
 
function move(direction){
if(direction=="forward"){i=++i%elements.length}
if(direction=="backward"){i=--i%elements.length}elements.eq(i).click()}
$(this).find(options.controls.next).click(function(){move("forward")});
$(this).find(options.controls.prev).click(function(){move("backward")})})};$(document).ready(function(){$('[data-toggle="tabslet"]').tabslet()})})(jQuery);

Merci d'avance pour votre aide.

[Bovino]

Ton code JavaScript est tout simplement un délice à lire...

Si tu ne fais pas d'effort de présentation de ton code, ne t'étonnes pas si personne ne fait d'effort pour te répondre.

[stevench]

Désolé Bovino, j'ai tenté d'organiser un peu mieux le code, est-ce que cela est plus clair ?