連接子彈滑塊導航

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