连接子弹滑块导航

Question

我试图让滑块与子弹相互连接的线条。当点击子弹时，这些行将改变颜色。所以问题是如果再次点击前一个项目时如何禁用下一个项目符号？这里是link example。

$('label').click(function() { 
    $(this).toggleClass('active').prev('.line-element').toggleClass("active"); 
}); 

Answer 1

我希望这是你想要什么：

$('label').click(function() { 
    if(!$(this).hasClass('active')) 
    { 
     $(this).addClass('active').prev('.line-element').addClass("active");  
    } 
    $(this).closest('.lines').nextAll('.lines').find('.line-element,label').removeClass('active'); 
    //Just removeClass from all the next .line-element and label when previous is clicked 
}); 

Updated Pen

上面的代码，如果你直接点击第3 label不起作用。但下面的修复程序确实如此

$('label').click(function() { 
    if(!$(this).hasClass('active')) 
    { 
     $(this).addClass('active').prev('.line-element').addClass("active").closest('.lines').prevAll('.lines').find('.line-element,label').addClass('active');  
    } 
    $(this).closest('.lines').nextAll('.lines').find('.line-element,label').removeClass('active') 
}); 

Updated Pen 2