AnythingSlider:让Nav不活跃？

Question

我正在使用AnythingSlider工具，并且在这方面遇到了一些css和js的问题。基本上，滑块有许多导航选项卡，帮助从一个幻灯片跳到另一个幻灯片。我想改变这一点，以便当coldfusion条件运行时，某些选项卡要么保持默认状态，要么处于非活动状态(将选项卡颜色更改为灰色，当用户单击该选项卡时不允许任何事情发生)。

所以基本上，我的CF应该是

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

滑块基本上是在html中设置的，如下所示：

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

我的想法是，也许我可以设置一个类li class="false“作为示例，并在每个‘幻灯片’中有两个li标记(如果x为真，则显示一个，如果不是。)

因此，我不确定这是否有意义，但大多数情况下，我需要一只手操纵CSS。滑块选项卡的代码如下所示：

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

更新了，我不明白。这是我页面末尾的代码(就在BODY标记结束之前)。为了确保代码运行，我在其中添加了一些警报。但是什么都没发生。标签不会变得不活跃，颜色也不会改变。

我修改了anythingslider.css以包括以下内容：

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

这是我主页的底部。这个脚本被包装在一些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

如果您只想更改选项卡颜色，请使用以下css

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

如果您想要实际禁用选项卡，则需要做更多的工作。我把这个函数放在一起来启用或禁用一个特定的选项卡。当然，此函数将破坏该选项卡的哈希标记功能，并且它不会禁用键盘或任何针对该面板的脚本--这将需要对插件(演示)进行一些更改。

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;
   })
 }
}

按以下方式使用上述功能

• 如果页面上有多个AnythingSlider，那么面板变量应该按照针对特定滑块的#slider定义如下： $('#slider').closest('.anythingSlider').find('.thumbNav a.panel‘+ num)； 如果只有一个，那么这个较短的变量就可以工作了。 var panel = $('.thumbNav a.panel‘+ num)；
• 禁用选项卡如下所示： settab(3，假)；
• 启用选项卡如下： settab(3，真)；