как соединить круги с линией по вертикали, если щелкнуть по кругу, он должен заполниться цветом

Question

Я хочу создать структуру, как показано на рисунке ниже, с неупорядоченным элементом списка, если пользователь щелкнет элемент списка, круг должен заполниться цветом.я создал на div внутри, что я взял элементы списка и внутри элемента span списка. Я нажимаю на первый элемент списка, круг должен заполниться цветом, если я нажму на другой список, то он должен заполниться цветом, как активный или сосредоточиться на ссылкахв menubar

Вот то, что я должен достичь Вот то, что я хочу достичь

Вот что я пытался

    <div class="sizes">
    <ul>
      <li class="dot"><span></span>6"x6" | 599</li>
      <li class="dot"><span></span>12"x12" | 799</li>
      <li class="dot"><span></span>12"x18" | 999</li>
      <li class="dot"><span></span>18"x12" | 799</li>
      <li class="dot"><span></span>16"x20" | 1,399</li>
    </ul>
</div>

css

.shop-all .product-content ul li {
    position:relative;
    font-family: 'Lato';
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0 10px 0;
    cursor: pointer;}

    .shop-all .product-content ul li span {
      border-radius: 50%;
      border: 1px solid #d95d5d;
      padding: 2px 10px;
      margin-right: 10px;
      background-color:#fff;
    }

    .shop-all .product-content ul li span.filled {
        background-color: #d95d5d;
    }

    .shop-all .product-content ul li span:before{
      content:'';
      position:absolute;
      border-left:1px solid #d95d5d;
      top:10px;
      z-index: -1;
      height: 92%;
    }

    .shop-all .product-content ul li:last-child span:before{
     content:none;
    }
     .shop-all .product-content ul li:last-child{
      padding-bottom:0
    }

    .shop-all .product-content ul {
      list-style: none;
    }

jquery

$('.dot').on('click', function(){
  $(this).toggleClass('filled');
});

Answer 1

Попробуйте это ..

$('.dot').on('click', function(){

$(this).toggleClass("filled");
$(this).siblings().removeClass("filled");

});

    body { margin:0; padding:0;}
		
   .container {width: 600px;}
		
   .shop-all .product-content ul li {
    position:relative;
    font-family: 'Lato';
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0 10px 0;
    cursor: pointer; line-height:16px;}

    .shop-all .product-content ul li span {
      border-radius: 50%;
      border: 1px solid #d95d5d;
      padding: 0 10px;
      margin-right: 10px;
      background-color:#fff;
    }

    .shop-all .product-content ul li.filled span {
        background-color: #d95d5d;
    }
	

    .shop-all .product-content ul li span:before{
      content:'';
      position:absolute;
      border-left:1px solid #d95d5d;
      top:10px;
      z-index: -1;
      height: 92%;
    }

    .shop-all .product-content ul li:last-child span:before{
     content:none;
    }
     .shop-all .product-content ul li:last-child{
      padding-bottom:0
    }

    .shop-all .product-content ul {
      list-style: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shop-all">
 <div class="product-content">
    <ul>
      <li class="dot"><span></span>6"x6" | 599</li>
      <li class="dot"><span></span>12"x12" | 799</li>
      <li class="dot"><span></span>12"x18" | 999</li>
      <li class="dot"><span></span>18"x12" | 799</li>
      <li class="dot"><span></span>16"x20" | 1,399</li>
    </ul>
</div>
</div>

Answer 2

Здесь вам нужно добавить класс на html согласно css и использовать ниже jquery

$('.dot').on('click', function(){
  $('.dot').children('span').removeClass('filled');
  $(this).children('span').toggleClass('filled');
});

.shop-all .product-content ul li {
    position:relative;
    font-family: 'Lato';
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0 10px 0;
    cursor: pointer;}

    .shop-all .product-content ul li span {
      border-radius: 50%;
      border: 1px solid #d95d5d;
      padding: 2px 10px;
      margin-right: 10px;
      background-color:#fff;
    }

    .shop-all .product-content ul li span.filled {
        background-color: #d95d5d;
    }

    .shop-all .product-content ul li span:before{
      content:'';
      position:absolute;
      border-left:1px solid #d95d5d;
      top:10px;
      z-index: -1;
      height: 92%;
    }

    .shop-all .product-content ul li:last-child span:before{
     content:none;
    }
     .shop-all .product-content ul li:last-child{
      padding-bottom:0
    }

    .shop-all .product-content ul {
      list-style: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="shop-all">
 <div class="product-content">
    <ul>
      <li class="dot"><span></span>6"x6" | 599</li>
      <li class="dot"><span></span>12"x12" | 799</li>
      <li class="dot"><span></span>12"x18" | 999</li>
      <li class="dot"><span></span>18"x12" | 799</li>
      <li class="dot"><span></span>16"x20" | 1,399</li>
    </ul>
</div>
</div>

Answer 3

jQuery("li").click(function() {
			jQuery(this).toggleClass("active");
			jQuery(this).siblings().removeClass("active");
		});

body { margin:0; padding:0;}
		
		.container {
			width: 600px;
		}
		
		.shop-all .product-content ul li {
    position:relative;
    font-family: 'Lato';
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0 10px 0;
    cursor: pointer; line-height:16px;}

    .shop-all .product-content ul li span {
      border-radius: 50%;
      border: 1px solid #d95d5d;
      padding: 0 10px;
      margin-right: 10px;
      background-color:#fff;
    }

    .shop-all .product-content ul li.active span {
        background-color: #d95d5d;
    }
	.shop-all .product-content ul li.active { color: #d95d5d;}

    .shop-all .product-content ul li span:before{
      content:'';
      position:absolute;
      border-left:1px solid #d95d5d;
      top:10px;
      z-index: -1;
      height: 92%;
    }

    .shop-all .product-content ul li:last-child span:before{
     content:none;
    }
     .shop-all .product-content ul li:last-child{
      padding-bottom:0
    }

    .shop-all .product-content ul {
      list-style: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    	<div class="shop-all">
            <div class="product-content">
                <ul>
                  <li class="dot"><span></span>6"x6" | 599</li>
                  <li class="dot"><span></span>12"x12" | 799</li>
                  <li class="dot"><span></span>12"x18" | 999</li>
                  <li class="dot"><span></span>18"x12" | 799</li>
                  <li class="dot"><span></span>16"x20" | 1,399</li>
                </ul>
            </div>
    	</div>
	</div>

Answer 4

Поскольку вы создали класс filled для диапазона, вам нужно попробовать следующий способ.Так что поменяйте

$('.dot').on('click', function(){
  $(this).toggleClass('filled');
});

на

 $('.dot').on('click', function(){
      $('.dot').find('span').removeClass('filled');
      $(this).find('span').toggleClass('filled');
});

ДЕМО ЗДЕСЬ