<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동적 탭 추가 및 순서 변경</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
body {
font-family: Arial, sans-serif;
}
.tabs {
display: flex;
cursor: pointer;
}
.tab {
padding: 10px 20px;
background-color: #f1f1f1;
margin-right: 5px;
border: 1px solid #ddd;
border-radius: 5px 5px 0 0;
transition: background-color 0.3s;
position: relative;
}
.tab:hover {
background-color: #ccc;
}
.active-tab {
background-color: #007BFF;
color: white;
}
.close-btn {
position: absolute;
top: 5px;
right: 5px;
background-color: #ff0000;
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
cursor: pointer;
}
.close-btn:hover {
background-color: #cc0000;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 5px 5px;
}
.active-content {
display: block;
}
.add-tab-btn {
margin-top: 20px;
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.add-tab-btn:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab active-tab" data-tab="tab1">
탭 1
<button class="close-btn">X</button>
</div>
<div class="tab" data-tab="tab2">
탭 2
<button class="close-btn">X</button>
</div>
<div class="tab" data-tab="tab3">
탭 3
<button class="close-btn">X</button>
</div>
</div>
<div id="tab1" class="tab-content active-content">
<h2>탭 1 내용</h2>
<p>이곳은 첫 번째 탭의 내용입니다.</p>
</div>
<div id="tab2" class="tab-content">
<h2>탭 2 내용</h2>
<p>이곳은 두 번째 탭의 내용입니다.</p>
</div>
<div id="tab3" class="tab-content">
<h2>탭 3 내용</h2>
<p>이곳은 세 번째 탭의 내용입니다.</p>
</div>
<button class="add-tab-btn">새 탭 추가</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('.tab').click(function(event) {
if ($(event.target).is('.close-btn')) return;
var tabId = $(this).data('tab');
$('.tab').removeClass('active-tab');
$('.tab-content').removeClass('active-content');
$(this).addClass('active-tab');
$('#' + tabId).addClass('active-content');
});
$(document).on('click', '.close-btn', function() {
var tab = $(this).closest('.tab');
var tabId = tab.data('tab');
tab.remove();
$('#' + tabId).remove();
if ($('.tab').length > 0) {
var firstTab = $('.tab').first();
firstTab.addClass('active-tab');
$('#' + firstTab.data('tab')).addClass('active-content');
}
});
let tabCount = 3;
$('.add-tab-btn').click(function() {
tabCount++;
var newTab = $('<div class="tab" data-tab="tab' + tabCount + '">탭 ' + tabCount +
'<button class="close-btn">X</button></div>');
$('.tabs').append(newTab);
var newTabContent = $('<div id="tab' + tabCount + '" class="tab-content">\
<h2>탭 ' + tabCount + ' 내용</h2>\
<p>이곳은 새로 추가된 탭의 내용입니다.</p>\
</div>');
$('body').append(newTabContent);
newTab.click(function(event) {
if ($(event.target).is('.close-btn')) return;
var newTabId = $(this).data('tab');
$('.tab').removeClass('active-tab');
$('.tab-content').removeClass('active-content');
$(this).addClass('active-tab');
$('#' + newTabId).addClass('active-content');
});
newTab.click();
});
// 탭 드래그 기능 활성화
$(".tabs").sortable({
axis: "x", // 수평 방향으로만 드래그 가능
stop: function(event, ui) {
// 드래그 후 활성화된 탭 상태 유지
$('.active-tab').click();
}
});
});
</script>
</body>
</html>
