Как сверстать списки в квадратах?

Question

Анна Емельянова @mckotello

HTML
CSS

Как сверстать списки в квадратах?

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

Вопрос задан 17 янв.
104 просмотра

3 комментария

Подписаться 1 Простой 3 комментария

Сергей delphinpro @delphinpro Куратор тега CSS

ну для начала все это нужно просто сверстать. С этим есть проблемы?

Написано 17 янв.

Анна Емельянова @mckotello Автор вопроса

Сергей delphinpro, вот код, но получилось это

<div class="container">
			<div class="square">
				<h2>1</h2>
				<ul id="list1">
					<li>Элемент 1</li>
					<li>Элемент 2</li>
					<li>Элемент 3</li>
				</ul>
			</div>
			<div class="arrows">
				<button onclick="moveItem('list1', 'list2')">→</button>
				<button onclick="moveItem('list2', 'list1')">←</button>
			</div>
			<div class="square">
				<h2>2</h2>
				<ul id="list2">
					<li>Элемент 4</li>
					<li>Элемент 5</li>
					<li>Элемент 6</li>
				</ul>
			</div>
		</div>

<style>
			.square {
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				display: inline-block;
				vertical-align: top;
				margin: 10px;
				padding: 10px;
			}
			.arrows {
				text-align: center;
				display: inline-block;
				vertical-align: top;
				margin: 10px;
				font-size: 24px;
			}
			ul {
				padding: 0;
			}
			li {
				list-style: none;
				cursor: pointer;
			}
		</style>

Написано 17 янв.

andy_bro @andy_bro
Квадрат 1

Элемент 1

Элемент 2

Элемент 3

Элемент 4

➡
⬅

Квадрат 2

Элемент 4

Элемент 5

Элемент 6

Элемент 7
Написано 18 янв.

Пригласить эксперта

Ответы на вопрос 1

2 комментария

andy_bro @andy_bro

document.addEventListener('DOMContentLoaded', function() {
    const list1 = document.getElementById('list1');
    const list2 = document.getElementById('list2');
    const toRightButton = document.getElementById('toRight');
    const toLeftButton = document.getElementById('toLeft');

    // Функция для перемещения элементов из одного списка в другой
    function moveItem(sourceList, targetList) {
        const selectedItems = sourceList.querySelectorAll('.selected');
        selectedItems.forEach(function(item) {
            item.classList.remove('selected');
            targetList.appendChild(item);
        });
    }

    // Обработчики событий для кнопок перемещения вправо и влево
    toRightButton.addEventListener('click', function() {
        moveItem(list1, list2);
    });

    toLeftButton.addEventListener('click', function() {
        moveItem(list2, list1);
    });

    // Обработчики событий для выбора элементов в списке
    list1.addEventListener('click', function(e) {
        const selectedItem = e.target;
        if (selectedItem.tagName === 'LI') {
            selectedItem.classList.toggle('selected');
        }
    });

    list2.addEventListener('click', function(e) {
        const selectedItem = e.target;
        if (selectedItem.tagName === 'LI') {
            selectedItem.classList.toggle('selected');
        }
    });
});

Написано 18 янв.

andy_bro @andy_bro

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Перемещение элементов</title>
</head>
<body>
    <div class="container">
        <div class="box" id="box1">
            <h2>Квадрат 1</h2>
            <ul id="list1" class="list">
                <li>Элемент 1</li>
                <li>Элемент 2</li>
                <li>Элемент 3</li>
                <li>Элемент 4</li>
            </ul>
        </div>
        <div class="arrows">
            <button id="toRight">➡</button>
            <button id="toLeft">⬅</button>
        </div>
        <div class="box" id="box2">
            <h2>Квадрат 2</h2>
            <ul id="list2" class="list">
                <li>Элемент 4</li>
                <li>Элемент 5</li>
                <li>Элемент 6</li>
                <li>Элемент 7</li>
            </ul>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Написано 18 янв.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

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

CSS

Простой
Как убрать полосы у скругленных углов?
- 1 подписчик
- 2 часа назад
- 39 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Swiper-slider c cube-эффектом перекрывает чётные слайды?
- 1 подписчик
- 14 часов назад
- 46 просмотров
0

ответов
CSS

Простой
Как сделать hover у вертикального градиента?
- 1 подписчик
- 15 часов назад
- 54 просмотра
1

ответ
HTML

+2 ещё

Средний
Как сделать рамки с помощью css или с помощью svg для изображений и вписать изображения туда?
- 1 подписчик
- 17 часов назад
- 51 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как передать несколько параметров js?
- 1 подписчик
- 18 часов назад
- 95 просмотров
1

ответ
HTML

Простой
Где можно создать image map? Есть рабочие онлайн-сервисы для этого?
- 3 подписчика
- 19 часов назад
- 311 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как передать данные с одной страницы на другую без изменения url?
- 2 подписчика
- 20 часов назад
- 134 просмотра
1

ответ
HTML

+1 ещё

Простой
Объект накладываемый на фон становится полупрозрачный, как исправить?
- нет подписчиков
- 21 час назад
- 70 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать центрирование кнопки смещая скролл по нажатию на эту кнопку?
- 1 подписчик
- вчера
- 64 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сконвертировать color-mix в rgb/hex?
- 1 подписчик
- вчера
- 68 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать front-end часть web-приложения

21 мая 2024, в 14:18

150000 руб./за проект

Сделать сайт

21 мая 2024, в 14:04

90000 руб./за проект

Сделать баннер

21 мая 2024, в 14:00

500 руб./за проект

ну для начала все это нужно просто сверстать. С этим есть проблемы?
Сергей delphinpro, вот код, но получилось это

<div class="container"> <div class="square"> <h2>1</h2> <ul id="list1"> <li>Элемент 1</li> <li>Элемент 2</li> <li>Элемент 3</li> </ul> </div> <div class="arrows"> <button onclick="moveItem('list1', 'list2')">→</button> <button onclick="moveItem('list2', 'list1')">←</button> </div> <div class="square"> <h2>2</h2> <ul id="list2"> <li>Элемент 4</li> <li>Элемент 5</li> <li>Элемент 6</li> </ul> </div> </div>

<style> .square { width: 200px; height: 200px; border: 1px solid #000; display: inline-block; vertical-align: top; margin: 10px; padding: 10px; } .arrows { text-align: center; display: inline-block; vertical-align: top; margin: 10px; font-size: 24px; } ul { padding: 0; } li { list-style: none; cursor: pointer; } </style>
Квадрат 1

Элемент 1

Элемент 2

Элемент 3

Элемент 4

➡
⬅

Квадрат 2

Элемент 4

Элемент 5

Элемент 6

Элемент 7

Answer 1 · 2024-01-18 02:15:26

body {
font-family: Arial, sans-serif;
}

.container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

.box {
border: 1px solid #ccc;
padding: 10px;
width: 40%;
text-align: center;
}

h2 {
margin: 0;
}

.list {
list-style-type: none;
padding: 0;
}

.list li {
margin: 5px 0;
cursor: pointer;
transition: background-color 0.3s, font-weight 0.3s;
}

.list li.selected {
background-color: #f0f0f0;
font-weight: bold;
}

.arrows {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20%;
}

button {
font-size: 24px;
margin: 10px 0;
padding: 5px 10px;
cursor: pointer;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
transition: background-color 0.3s;
}

button:hover {
background-color: #0056b3;
}

Как сверстать списки в квадратах?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт