我正在使用 AnythingSlider工具,我在使用 css 和 js 时遇到了一些问题。基本上, slider 有许多导航选项卡,可帮助从一张幻灯片跳到另一张幻灯片。我想更改此设置,以便在 coldfusion 条件运行时,某些选项卡将保持默认状态或变为非事件状态(将选项卡的颜色更改为灰色,当用户单击该选项卡时不会发生任何事情。)
所以基本上,我的 CF 应该是这样的
<cfif #X# is ""> //if true, make tab #2 not clickable, change color to grey
//else, if false, keep tab normal.
slider 基本上是这样在 html 中设置的:
<ul>
<li></li> //slide #1
<li></li> //slide #2 etc etc
</ul>
我的想法是,也许我可以设置一个类 li class="false"作为示例,并且每个“幻灯片”有两个 li 标签(如果 x 为真则显示一个,否则显示另一个。)
所以,我不确定这是否有意义,但主要是,我需要有人来操纵 CSS。 slider 选项卡的代码如下所示:
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;
})
}
}
最佳答案
如果您只想更改选项卡颜色,请使用此 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 的
#slider
:var panel = $('#slider').closest('.anythingSlider').find('.thumbNav a.panel' + num);
如果只有一个,那么这个较短的变量就可以了
var panel = $('.thumbNav a.panel' + num);
按如下方式禁用标签:
settab(3, false);
按如下方式启用选项卡:
settab(3, true);
关于javascript - AnythingSlider:使导航选项卡处于非事件状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4026503/