2010-07-15 5 views
2

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

Répondre

4

Ce:

ul.Tabs li a { 
    /* ... */ 
    color: #444; 
    /* ... */ 
} 

n'est pas remplacé par ceci:

html ul.Tabs li.active, html ul.Tabs li.active a:hover { 
    /* ... */ 
    color:#FFF; /* This doesn't do anything! */ 
} 

Par conséquent, les a éléments tels qu'ils sont définis par ul.Tabs li a

Une solution serait d'ajouter ceci:

ul.Tabs li.active a { 
    color: #FFF; 
} 



Si découvert cela en utilisant Firebug. En inspectant les propriétés css d'un élément (vous pouvez le faire avec tous les éléments de la page), il était facile à repérer. Comme vous pouvez le voir, Firebug dit que l'attribut de couleur de l'élément est écrasé comme décrit ci-dessus (il a un biffés):

firebug http://i26.tinypic.com/2vmf137.jpg

+0

Merci beaucoup! – DLiKS