Problème : Tabs dans une Tab...

michox
Javascript

Bonjour, je vous expose mon problème :
j'aimerais que dans une tab il y est des tabs... Mon problème en image :
[img]http://nightzclub.com/img.png[/img]

Voici le HTML :
[code] <ul id="tabss">
<li><a href="#" title="personnels">Personnel</a></li>
</ul>

<div id="contents">
<div id="personnels">

<ul id="tabsss">
<li><a href="#" title="djs">DJ</a></li>
<li><a href="#" title="videurs">Videur</a></li>
<li><a href="#" title="tab33">Serveur</a></li>
<li><a href="#" title="tab33">Vendeur</a></li>
<li><a href="#" title="tab33">Animateur</a></li>
<li><a href="#" title="tab33">Agent de propreté</a></li>
<li><a href="#" title="tab33">Agent de maintenance</a></li>
</ul>
<span id="contentss"> 
<span id="djs">
LES DJ
</span>
<span id="videurs">
LES VIDEURS
</span>
</span>

</div>

</div>
[/code]

Voici le code JS pour la tab qui ne marche pas :
[code]$(document).ready(function() {
$("#contentss span").hide(); // Initially hide all content
$("#tabsss li:first").attr("id","currentss"); // Activate first tab
$("#contentss span:first").fadeIn(); // Show first tab content

$('#tabsss a').click(function(e) {
    e.preventDefault();       
    $("#contentss span").hide(); //Hide all content
    $("#tabsss li").attr("id",""); //Reset id's
    $(this).parent().attr("id","currentss"); // Activate this
    $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
});

})();[/code]

Voici le Css :
[code]#tabsss {
overflow: auto;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}

tabsss li { 
margin: 0;
padding: 0;
float: left;

}

tabsss a { 
background: #ff924a;
background: linear-gradient(220deg, transparent 10px, #ff924a 10px);
color: #ffffff;
float: left;
font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
height: 35px;
padding: 0 30px;
text-decoration: none;
border-radius:10px 0 0 0;

}

tabsss a:hover { 
background: #d05300;
background: linear-gradient(220deg, transparent 10px, #d05300 10px);

}

tabsss a:focus { 
outline: 0;

}

tabsss #currentss a { 
background: #835221;
background: linear-gradient(220deg, transparent 10px, #835221 10px);
text-shadow: none;    
color: #ffffff;

}

contentss { 
background-color: #f5dabf;
background-image:         linear-gradient(top, #fff, #ddd);
border-radius: 0 10px 10px 10px;
padding: 30px;
border:1px solid #835221;

}

/ Remove the rule below if you want the content to be "organic" /

contentss div { 
height: auto;

}[/code]

Merci énormément je traîne beaucoup dessus...

Aucune réponse