up

2024-12-23 14:17:22 +07:00
commit 6e79cfee21
1 changed files with 104 additions and 0 deletions
--- a/tag.html
+++ b/tag.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nhập Thẻ</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+        }
+
+        .tags-container {
+            display: flex;
+            flex-wrap: wrap;
+            padding: 5px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            width: 100%;
+            max-width: 400px;
+            box-sizing: border-box;
+            background: #f9f9f9;
+        }
+
+        .tag {
+            display: flex;
+            align-items: center;
+            background-color: #e0e0e0;
+            color: #333;
+            border-radius: 5px;
+            padding: 0 10px;
+            margin: 5px;
+            font-size: 14px;
+            height: 35px;
+        }
+
+        .tag .remove-tag {
+            background: none;
+            border: none;
+            color: gray;
+            font-weight: bold;
+            cursor: pointer;
+            padding-left: 0;
+        }
+
+        .tag .remove-tag:hover {
+            color: #d50000;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="tags-container" id="tagsContainer">
+
+    </div>
+
+    <script>
+        const tagsContainer = document.getElementById('tagsContainer');
+
+        // Dữ liệu thẻ
+        let tags = ['Đệm bông ép Olympia', 'Đệm cao su Olympia', 'Đệm foam Olympia', 'Đệm lò xo Olympia', 'Đệm Olympia'];
+
+        // Hàm render thẻ
+        function renderTags() {
+            // Xoá các thẻ hiện có
+            tagsContainer.innerHTML = '';
+            tags.forEach((tag, index) => {
+                const tagElement = createTagElement(tag, index);
+                tagsContainer.appendChild(tagElement);
+            });
+        }
+
+        // Hàm tạo phần tử thẻ
+        function createTagElement(tag, index) {
+            const tagElement = document.createElement('div');
+            tagElement.className = 'tag';
+            tagElement.innerHTML = `
+                <button class="remove-tag" data-index="${index}">&times;</button>
+                ${tag}
+            `;
+            return tagElement;
+        }
+
+        // Hàm xử lý xóa thẻ
+        function handleRemoveTag(event) {
+            if (event.target.classList.contains('remove-tag')) {
+                const index = event.target.getAttribute('data-index');
+                tags.splice(index, 1);
+                renderTags();
+            }
+        }
+
+        // hàm xử lý hiển thị tab và xóa tag
+        function init() {
+            renderTags();
+            tagsContainer.addEventListener('click', handleRemoveTag);
+        }
+
+        // chạy hiển thị tab và xóa tag
+        init();
+    </script>
+</body>
+
+</html>