带有连接项目符号的滑块导航

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

带有连接项目符号的滑块导航

Slider navigation with connected bullets

jquery

slider