AnythingSlider：使导航选项卡不活动吗？

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”作为示例，并且每个'slide'有两个li标签（如果x为true，则显示一个，否则为另一个）。

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

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

更新嗯，我不明白。 这是页面结尾处的代码（恰好在结束BODY标记之前。我在其中添加了一些警报，只是为了确保代码能够运行并且可以。但是，什么也没有发生。选项卡不会变得无效，颜色也不会改变。

我修改了anyslider.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; }

如果要实际禁用该选项卡，则需要做更多的工作。 我将这个功能放在一起以启用或禁用特定选项卡。 授予此功能将破坏该选项卡的哈希标签功能，并且不会禁用键盘或针对该面板的任何脚本-这需要对插件（ 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;
   })
 }
}

如下使用上述功能

• 如果页面上有多个AnythingSlider，则应该使用以下#slider定位特定的滑块来定义panel变量：

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

  如果只有一个，则此较短的变量将起作用

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

• 禁用选项卡，如下所示：

   settab(3, false); 

• 启用选项卡，如下所示：

   settab(3, true);