Каким образом реализовать такие полосы?

@Alex_DeaD · Регистрация: 09.12.2013

Студворк — интернет-сервис помощи студентам

Добрый вечер, форумчани. Внимание вопрос:
Как можно реализовать такие полосы для табов(подчеркнут активный таб и от него линия дальше к слайдер)? Сами табы я организовал, код будет ниже. А вот полосы не знаю как.Будьте добры подскажите как это сделать?

Кроме того, хотел бы услышать критику на счет моего видения реализации самих табов. Правильно что с картинками играюсь или как-то нужно иначе, если да то могли бы показать пример, как отрисовать такие же кружки

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="row">
            <div class="col-md-4"> 
                <div class="wrapper">
                    <div class="tabs">
                        <li class="tab pasive_c">
                            <span class="name">
                                Гостиная
                            </span>
                            <span class="description">
                                25 м <sup>2</sup>
                            </span>
                        </li>
                        <li class="tab pasive_c"><span class="name">
                                Детская
                            </span>
                            <span class="description">
                                25 м <sup>2</sup>
                            </span>
                        </li>
                        <li class="tab pasive_c"><span class="name">
                                Кухня
                            </span>
                            <span class="description">
                                25 м <sup>2</sup>
                            </span>
                        </li>        
                    </div>
                </div>
                </div>
            </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.ourwork li {
  list-style-type: none;
}
.ourwork .wrapper .active {
  background: url(../img/circleactive.png) no-repeat left center;
  background-size: auto;
  padding: 5px 0px 5px 50px;
}
.ourwork .pasive_c {
  background: url(../img/circleimg.png) no-repeat left center;
  background-size: auto;
  padding: 5px 0px 5px 50px;
}
.ourwork .name {
  font-family: "ExoLight", sans-serif;
  font-size: 24px;
  display: block;
}
.ourwork .description {
  font-family: "ExoExtraLight", sans-serif;
  font-size: 15px;

Код JS для табов

JavaScript
1
2
3
4
5
6
    $(".tab_item").not(":first").hide();
    $(".wrapper .tab").click(function() 
        {
            $(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active");
            $(".tab_item").hide().eq($(this).index()).fadeIn()
        }).eq(0).addClass("active");

@boilzzz · 28.05.2016, 21:22

Извините а вы уверены что это тот css код? а то у меня вот так https://jsfiddle.net/az7r4a4p/
все увидел, надо без этого класса .ourwork
Пробовали так?

CSS
1
border-bottom:1px solid grey;

https://jsfiddle.net/az7r4a4p/3/

@Alex_DeaD · 28.05.2016, 22:17 **[ТС]**

Сообщение от boilzzz

Пробовали так?

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

@boilzzz · 28.05.2016, 22:37

Alex_DeaD, Ты можешь сам регулировать длину этой линии, там идет свойство

CSS
1
width:300px;

чем больше увеличь тем длиннее будет) А можно посмотреть на 2 и 3-й пункт слайдера в активированом виде что бы более понять какая линия боковая должна быть

Добавлено через 12 минут
https://jsfiddle.net/az7r4a4p/4/
Как то так. Будут фото 2 и 3-й активной, можно будет улучшить) На дизайн не смотри если что сам его редезайнешь)

@Alex_DeaD · 28.05.2016, 23:03 **[ТС]**

Сообщение от boilzzz

А можно посмотреть на 2 и 3-й пункт слайдера в активированом виде

Она динамическая, в зависимости от того какой там включен регулируется её длина.
Пример линии боковой можно посмотреть в прикрепленной картинке
или тут:

Кликните здесь для просмотра всего текста

@boilzzz · 29.05.2016, 00:40

Alex_DeaD,

Не по теме:

мой мозг чуть не взорвался:D

я думаю это костыль но вот https://jsfiddle.net/az7r4a4p/12/ попробуй так)
p.s если профан заглянет скажите это костыль или нет)

Добавлено через 36 минут
https://jsfiddle.net/az7r4a4p/13/ исправил еще 1 не дочет)

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	29.05.2016, 00:40
	Сообщение было отмечено Alex_DeaD как решение Решение Alex_DeaD, Не по теме: мой мозг чуть не взорвался:D я думаю это костыль но вот https://jsfiddle.net/az7r4a4p/12/ попробуй так) p.s если профан заглянет скажите это костыль или нет) Добавлено через 36 минут https://jsfiddle.net/az7r4a4p/13/ исправил еще 1 не дочет) 1

Каким образом реализовать такие полосы?

Решение