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为真，则显示一个，如果不是则显示另一个。）

所以，我不确定这是否有意义但主要是，我需要一只手来操纵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; }

如果你想要实际禁用标签，那还有一点工作。我将此功能放在一起以启用或禁用特定选项卡。当然，此功能将破坏该选项卡的哈希标记功能，并且不会禁用键盘或任何面向该面板的脚本 - 这需要对插件进行一些更改（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定位特定滑块：
```
var panel = $('#slider').closest('.anythingSlider').find('.thumbNav a.panel' + num);
```
如果只有一个，那么这个较短的变量将起作用
```
var panel = $('.thumbNav a.panel' + num);
```
按如下方式禁用标签：
```
settab(3, false);
```
启用标签，如下所示：
```
settab(3, true);
```

AnythingSlider：让Nav选项卡无效？

1 个答案: