如何在图像滑块上添加背景色到文本导航

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

然后，将以下行添加到制表符中。Li 's each loop:

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

最后，你需要在rotateimage()函数中删除disabled类，然后再分配current，然后禁用non-current。这样的:

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

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

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