如何为图像滑块上的文本导航添加背景颜色？

Question

我有一个由文本导航控制的图像滑块。当相关幻灯片在图库中时，文本会以橙色突出显示。我希望其他文本具有黑色背景的非活动状态，但无法使其正常工作！

（以防万一这没有多大意义！基本上，我希望当前的背景颜色为橙色，不活动时的背景颜色为黑色。）谢谢

$(document).ready(function(){   
    $('.slider').each(function(e){
        if(e == 0){
            $(this).addClass('current');
        }
         $(this).attr('id', 'handle' + e);
    })

    $('.tabs li').each(function(e){
        if(e == 0){
            $(this).addClass('current'); //adds class current to 1st li
        }
        $(this).wrapInner('<a class="title"></a>'); //wraps list items in anchor tag                
        $(this).children('a').attr('href', '#handle' + e);//adds href to the anchors    
        t = $(this).children('a').text(); 
        $('#handle' + e).append('<h2>' + t + '</h2>'); //adds h2 and text to big images 

    })

    $('.tabs li a').click(function(){
        c = $(this).attr('href');       
        if($(c).hasClass('current')){
            return false;
        }else{
            showImage($(c), 20);
            $('.tabs li').removeClass('current');
            $(this).parent().addClass('current');
            return false;
        }           
    })

    runRotateImages();

    $("#featured").hover(
        function(){                 
            clearTimeout(xx);
        }, 
        function(){                 
            runRotateImages();
        }
    )



})

function showImage(img, duration){       

    $('.slider').removeClass('current').css({
            "opacity" : 0.0, 
            "zIndex" : 2
            });
    img.animate({opacity:1.0}, duration, function(){        
        $(this).addClass('current').css({zIndex:1});
    });  

}
function rotateImages(){

    var curPhoto = $("div.current");
    var nxtPhoto = curPhoto.next();     
    var curTab = $(".tabs li.current");
    var nxtTab = curTab.next();             

    if (nxtPhoto.length == 0) {
        nxtPhoto = $('#featured div:first');    
        nxtTab = $('.tabs li:first-child');         
    }                   

    curTab.removeClass('current');
    nxtTab.addClass('current');
    showImage(nxtPhoto, 300);

}
function runRotateImages(){

    xx = setInterval("rotateImages()", 5000);

}

我添加了一个 jsfiddle - http://jsfiddle.net/n5EPM/3/

但是，在 jsfiddle 上它似乎不会自动循环浏览图像，不知道为什么，在浏览器中没有问题。

Answer 1

尝试使用 not() 方法：http://api.jquery.com/not/

基本上需要新建一个类disabled

.disabled{
    background-color:#000000;   
}

然后，将以下行添加到您的 tabs.li 的每个循环中：

 $(".tabs li").not(".current").addClass('disabled'); //add disabled class for non-current tabs

最后，您需要在分配 current 之前删除 rotateimage() 函数中的禁用类，然后再次禁用非当前类。像这样：

curTab.removeClass('current');
nxtTab.removeClass('disabled'); //remove diabled class
nxtTab.addClass('current');
 $(".tabs li").not(".current").addClass('disabled'); // disable non-current again

在这里工作 jsfiddle：http://jsfiddle.net/n5EPM/9/

这可能不是完美的解决方案，但您需要稍微调整一下。

希望这会有所帮助。