AnythingSlider: Rendre les onglets Nav inactifs?

Question

J'utilise l'outil AnythingSlider et j'ai quelques problèmes avec le css et js sur ce point. Fondamentalement, le curseur a un certain nombre d'onglets de navigation qui permettent de sauter d'une diapositive à l'autre. Je veux changer cela pour que, quand un coldfusion conditionnel s'exécute, certains onglets restent soit dans un état par défaut ou deviennent inactifs (changer la couleur de l'onglet en gris, ne laissez rien se produire lorsque l'utilisateur clique sur cet onglet.)

au fond, mon CF serait quelque chose comme

<cfif #X# is ""> //if true, make tab #2 not clickable, change color to grey 
       //else, if false, keep tab normal. 

le curseur est essentiellement créé en html comme ceci:

<ul> 
    <li></li> //slide #1 
    <li></li> //slide #2 etc etc 
</ul> 

J'ai eu l'idée que peut-être que je pourrais mettre en place une classe li class = "false "à titre d'exemple et avoir deux étiquettes li par 'slide' (en montrer une si x est tr Donc, je ne suis pas sûr si cela a du sens mais surtout, j'ai besoin d'une main pour manipuler le CSS. Le code pour les onglets de curseur ressemble:

div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a { 
    background-color: #7C9127; 
} 

MISE À JOUR Eh bien, je ne comprends pas. C'est le code à la fin de ma page (juste avant de mettre fin à la balise BODY.) J'ai jeté des alertes juste pour m'assurer que le code fonctionne, mais rien ne se passe: les onglets ne deviennent pas inactifs et la couleur ne change jamais.

I modifié anythingslider.css inclure ceci:.

div.anythingSlider.activeSlider .thumbNav a.false, 
      div.anythingSlider.activeSlider .thumbNav a.false:hover { background: #555; } 

et c'est en bas de ma page principale ce script est enveloppé dans des balises cfoutput:

<cfif #selected_main_details.X# IS ""> 
     settab(3, false); 
    <cfelse> 
     settab(3, true); 
    </cfif> 

function settab(num, enable){ 
var panel = $('.thumbNav a.panel' + num); 
if (enable){ 
    panel 
    .removeClass('false') 
    .unbind('click') 
    .bind('click', function(){ 
    panel.closest('.anythingSlider').find('.anythingBase').data('AnythingSlider').gotoPage(num); 
    return false; 

    }) 
} else { 

    panel 
    .addClass('false') 
    .unbind('click focusin') 
    .bind('click', function(){      
    return false; 

    }) 

} 
} 

Answer 1

Si vous voulez pour changer la couleur de l'onglet, utilisez ce css

div.anythingSlider.activeSlider .thumbNav a.false, 
div.anythingSlider.activeSlider .thumbNav a.false:hover { background: #555; } 

C'est un peu plus de travail si vous voulez désactiver l'onglet. J'ai mis en place cette fonction pour activer ou désactiver un onglet spécifique. Accordée cette fonction casser la fonctionnalité d'étiquette de hachage pour cet onglet et elle ne désactive pas le clavier ou tout script qui cible ce panneau - cela nécessiterait quelques modifications au plugin (Demo).

function settab(num, enable){ 
var panel = $('.thumbNav a.panel' + num); 
if (enable){ 
    panel 
    .removeClass('false') 
    .unbind('click') 
    .bind('click', function(){ 
    panel.closest('.anythingSlider').find('.anythingBase').data('AnythingSlider').gotoPage(num); 
    return false; 
    }) 
} else { 
    panel 
    .addClass('false') 
    .unbind('click focusin') 
    .bind('click', function(){ 
    return false; 
    }) 
} 
} 

Utilisez la fonction ci-dessus comme suit

• Si vous avez plus d'un AnythingSlider sur la page, la variable du panneau doit être défini comme suit avec le #slider ciblant le curseur spécifique:

  var panel = $('#slider').closest('.anythingSlider').find('.thumbNav a.panel' + num); 
  

  s'il n'y a qu'une seule, cette variable plus courte fonctionnera

  var panel = $('.thumbNav a.panel' + num); 
  

• Désactiver l'onglet comme suit:

  settab(3, false); 
  

• activer l'onglet comme suit:

  settab(3, true);