Afficher une classe "active"
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:
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:
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.
