Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
0 / 0 / 0
Регистрация: 05.12.2013
Сообщений: 23
1

Как выполнить данное условие с переключением информации в одном блоке

16.06.2017, 08:03. Показов 996. Ответов 2
Метки нет (Все метки)

Есть блок красный что показан на скриншоте это блок который меняется при нажатии на кнопки, синие это собственно 3 картинки и 3 кнопки. Вопрос, как можно это сделать, попробовала табом сделать, но кроме вот этого ничего не вышло, либо изображения куда-то улетают либо блок с текстом умирает .
Как бы вы сделали данный функционал.
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
<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab-1" checked>
        <label for="tab-1">First</label>
        <div class="tab-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab-2">
        <label for="tab-2">Second</label>
        <div class="tab-content">
            Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="tab-3">
        <label for="tab-3">Third</label>
        <div class="tab-content">
            Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </li>
</ul>
CSS
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
tabs {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.tabs:after {
    content: "";
    clear: both;
    display: block;
    height: 240px;
}
.tabs li {
    float: left;
}
.tabs li > input {
    display: none;
}
.tabs li > label {
    display: inline-block;
    border: 1px solid #999;
    border-right-width: 0;
    border-bottom-width: 0;
    height: 30px;
    line-height: 30px;
    padding: 5px 20px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tabs li:last-child > label {
    border-right-width: 1px;
}
.tabs .tab-content {
    display: none;
    position: absolute;
    left: 0;
    padding: 20px;
    border: 1px solid #999;
    height: 200px;
    overflow-y: auto;
}
 
/* Функциональность: */
 
.tabs li > input:checked + label {
    background-color: #999;
}
.tabs li > input:checked ~ .tab-content {
    display: block;
}
Миниатюры
Как выполнить данное условие с переключением информации в одном блоке  
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
16.06.2017, 08:03
Ответы с готовыми решениями:

Выполнить условие при одном изменении
Не могу ничего придумать. Помогите. Есть кусок кода, который подтягивается через ajax. var num1...

Изменение в одном блоке при нажатии в другом блоке
Скажите возможно ли с помощью CSS или HTML(что мало вероятно) сделать так чтобы если я...

Как установить на одном системном блоке две ОС
Долго думал в какой ветке задать вопрос, то ли в Win, то ли в Linux, то ли ещё где... Задача...

Как проверить класс в одном блоке и добавить в другой?
Всем добрый день, Есть блок &lt;div class=&quot;nav-wrap&quot;&gt; &lt;ul class=&quot;menu-group&quot;...

2
0 / 0 / 0
Регистрация: 16.06.2017
Сообщений: 2
16.06.2017, 09:11 2
Для этого надо использовать JQuery и JCarouselLite.
В отдельном скрипте прописываете:
Javascript
1
2
3
4
5
6
7
8
9
10
11
$ (document).ready(function() {
    $("#ID_блока_где_будут_картинки_и_текст").jCarouselLite({
        horizontal: true,
        hoverPause: true,
        btnPrev: "#ID_кнопки_назад",
        btnNext: "#ID_кнопки вперед",
        visible: 1,
        auto: 3000, //скорость при которой будут меняться новости
        speed: 500
    }); 
});
0
0 / 0 / 0
Регистрация: 05.12.2013
Сообщений: 23
16.06.2017, 13:26  [ТС] 3
я не про слайдер, я про блоки поверх слайдера.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.06.2017, 13:26

Как отобразить на форме данные из 2-х таблиц в одном блоке?
Привет! Подскажите, пожалуйста, новичку, как на форме отобразить данные из двух таблиц, в виде...

Как грамотно записать данное условие?
Всем привет! Пишу код для моделирования смесителя. Необходимо, чтобы k изменялось от 1 до 200....

Подскажите как выполнить данное действие
Здравствуйте,для общего развития решил отдельно от заданий из универа еще попробовать написать свою...

Резиновая верстка, как создать форму и список в одном блоке!
Нужно создать резиновый блок в одну линию где слева форма поиска 600px, справа список меню с двух...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru