Je suis en train de coder une interface à onglets en utilisant jQuery et pendant que tout fonctionne, du point de vue de la fonctionnalité, il y a un problème avec le CSS. Quand un onglet est actif, la couleur du texte est censée changer en blanc mais ce n'est pas le cas dans le CSS et cela ne change que lors du vol stationnaire. S'il vous plaît regardez ce code et dites-moi ce que je fais mal!jQuery Problème CSS de l'interface à onglets
Voici le HTML:
<div id="FooterTabsWrapper">
<ul class="Tabs">
<li><a href="#Tab1">MOST POPULAR</a></li>
<li><a href="#Tab2">MOST COMMENTS</a></li>
<li><a href="#Tab3">HIGHEST RATED</a></li>
</ul>
<div class="TabWrapper">
<div id="Tab1" class="TabContent">
</div>
<div id="Tab2" class="TabContent">
</div>
<div id="Tab3" class="TabContent">
</div>
</div>
Voici le CSS:
ul.Tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 40px;
width: 100%;
}
ul.Tabs li {
float: left;
margin: 0;
padding: 0;
height: 40px;
line-height: 40px;
overflow: hidden;
width:100px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul.Tabs li a {
text-decoration: none;
color: #444;
display: block;
outline: none;
position: relative;
letter-spacing:-1px;
}
ul.Tabs li a:hover {
background-image:url(../Images/ActiveTab.jpg);
background-repeat:no-repeat;
color:#FFF;
}
html ul.Tabs li.active, html ul.Tabs li.active a:hover {
background-image:url(../Images/ActiveTab.jpg);
background-repeat:no-repeat;
color:#FFF; /* This doesn't do anything! */
}
.TabWrapper {
border-top: none;
clear: both;
float: left;
width: 100%;
background: #2D2D2D;
}
.TabContent {
padding: 20px;
height:185px;
overflow:auto;
}
Et voici le jQuery:
$(document).ready(function() {
//Default Action
$(".TabContent").hide(); //Hide all content
$("ul.Tabs li:first").addClass("active").show(); //Activate first tab
$(".TabContent: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
$(".TabContent").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
Merci,
DLiKS
Merci beaucoup! – DLiKS