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

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

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

Вот что я пробовал

    <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');
});

javascript jquery html css

06.12.2018 05:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

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

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

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

ДЕМО ЗДЕСЬ

Пожалуйста, используйте StackSnippets для демонстраций HTML / CSS / JS.

— 06.12.2018 06:07

спасибо за помощь, но если вы хотите удалить этот заполненный класс из текущего элемента и переместить его в другой список, который сейчас нажат

— 06.12.2018 06:08

@ScottSauyet, извините, я не знаком с этим.

— 06.12.2018 06:08

@Kiranramchandran: см. Этот мета-ответ для получения дополнительной информации: meta.stackoverflow.com/questions/358992

— 06.12.2018 06:12

06.12.2018 06:05

Здесь вам нужно добавить класс в 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>

06.12.2018 06:05

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>

06.12.2018 06:08

Ответ принят как подходящий

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

$('.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>

06.12.2018 07:48

Другие вопросы по теме

Изменение z-индекса виджета

Регулярное выражение, если оператор else не работает

Google Map Как добавить второе местоположение в map-active.js

Как проверить, что данная дата равна текущему месяцу, используя javascript?

Параметры конфигурации не заданы при перестроении - Bootstrap Multiselect

Попытка разобрать json-код с консоли в Laravel

Вынести элементы на передний план в d3 / svg

Как отключить или настроить <input type = "date"> в разных мобильных браузерах

Сменить метатег при изменении маршрута

Laravel / AJAX - поле поиска и поиск по фамилии и отображение в Texbox

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

Ответы 4

Другие вопросы по теме

Похожие вопросы