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

最后，您需要在assignimage（）函数中删除禁用的类，然后再分配当前值，然后再次禁用非当前值。像这样：

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/

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

希望这有帮助。

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

1 个答案: