- Tab 1
- Tab 2
- Tab 3
Tab 1 Content
This is the content of Tab 1 in the gothic architecture style design. It features a mysterious atmosphere with a majestic design.
When selected, the tab changes to a brown background with golden text, creating a noble impression.
Tab 2 Content
This is the content of Tab 2 in the gothic architecture style design. It features decorative elements reminiscent of church architecture.
On hover, it changes to bright gold with mystical light effects.
Tab 3 Content
This is the content of Tab 3 in the gothic architecture style design. It has a grid pattern background that expresses the texture of stone construction.
Majestic animation effects are applied when switching tabs.
HTML
<div class="container">
<h1>Gothic Architecture Style Tab Design</h1>
<div class="tab-container">
<ul>
<li class="selected" data-id="tab-1">Tab 1</li>
<li data-id="tab-2">Tab 2</li>
<li data-id="tab-3">Tab 3</li>
</ul>
<div class="tab-content selected" id="tab-1">
<p>Tab 1 Content</p>
<p>This is the content of Tab 1 in the gothic architecture style design. It features a mysterious atmosphere with a majestic design.</p>
<p>When selected, the tab changes to a brown background with golden text, creating a noble impression.</p>
</div>
<div class="tab-content" id="tab-2">
<p>Tab 2 Content</p>
<p>This is the content of Tab 2 in the gothic architecture style design. It features decorative elements reminiscent of church architecture.</p>
<p>On hover, it changes to bright gold with mystical light effects.</p>
</div>
<div class="tab-content" id="tab-3">
<p>Tab 3 Content</p>
<p>This is the content of Tab 3 in the gothic architecture style design. It has a grid pattern background that expresses the texture of stone construction.</p>
<p>Majestic animation effects are applied when switching tabs.</p>
</div>
</div>
</div>CSS
body {
font-family: 'Times New Roman', serif;
background: #1a1a1a;
padding: 20px;
color: #d4af37;
}
.container {
max-width: 800px;
margin: 0 auto;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
border: 3px solid #8b4513;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
}
h1 {
text-align: center;
padding: 30px;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
color: #d4af37;
font-family: 'Times New Roman', serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
border-bottom: 3px solid #8b4513;
text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
/* ===== Gothic Architecture Style Design ===== */
.tab-container {
overflow: hidden;
border-radius: 0;
position: relative;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
border: 3px solid #8b4513;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tab-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
90deg,
transparent,
transparent 20px,
rgba(139, 69, 19, 0.1) 20px,
rgba(139, 69, 19, 0.1) 22px
),
repeating-linear-gradient(
0deg,
transparent,
transparent 20px,
rgba(139, 69, 19, 0.1) 20px,
rgba(139, 69, 19, 0.1) 22px
);
pointer-events: none;
}
.tab-container ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
border-bottom: 3px solid #8b4513;
position: relative;
z-index: 2;
}
.tab-container ul::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
#d4af37 50%,
transparent 100%);
animation: gothicGlow 3s ease-in-out infinite;
}
@keyframes gothicGlow {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.tab-container ul li {
flex: 1;
padding: 20px 24px;
text-align: center;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
color: #d4af37;
font-family: 'Times New Roman', serif;
font-weight: 600;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
border-right: 2px solid #8b4513;
background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}
.tab-container ul li:last-child {
border-right: none;
}
.tab-container ul li::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.4s ease;
}
.tab-container ul li:hover::before {
opacity: 1;
}
.tab-container ul li.selected {
color: #fff;
background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
box-shadow:
0 4px 16px rgba(139, 69, 19, 0.6),
inset 0 2px 4px rgba(255, 255, 255, 0.2),
inset 0 -2px 4px rgba(0, 0, 0, 0.3);
text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
font-weight: 700;
animation: gothicPulse 2s ease-in-out infinite alternate;
}
@keyframes gothicPulse {
from {
box-shadow:
0 4px 16px rgba(139, 69, 19, 0.6),
inset 0 2px 4px rgba(255, 255, 255, 0.2),
inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}
to {
box-shadow:
0 6px 20px rgba(139, 69, 19, 0.8),
inset 0 2px 4px rgba(255, 255, 255, 0.3),
inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}
}
.tab-container ul li.selected::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #d4af37, #ffd700, #d4af37);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}
.tab-container ul li:not(.selected):hover {
background: linear-gradient(135deg, #3d3d3d 0%, #2a2a2a 100%);
color: #ffd700;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
transform: translateY(-2px);
}
.tab-content {
display: none;
padding: 40px;
min-height: 200px;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: #d4af37;
font-family: 'Times New Roman', serif;
font-size: 18px;
line-height: 1.8;
position: relative;
z-index: 2;
border: 2px solid #8b4513;
border-top: none;
}
.tab-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(
90deg,
transparent,
transparent 30px,
rgba(139, 69, 19, 0.05) 30px,
rgba(139, 69, 19, 0.05) 32px
);
pointer-events: none;
}
.tab-content::after {
content: '';
position: absolute;
top: 20px;
left: 20px;
width: 40px;
height: 40px;
background:
radial-gradient(circle, #d4af37 0%, transparent 70%);
opacity: 0.1;
border-radius: 50%;
}
.tab-content.selected {
display: block;
animation: gothicReveal 0.6s ease;
}
@keyframes gothicReveal {
from {
opacity: 0;
transform: translateY(-20px);
filter: blur(3px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}JavaScript
const tabContainer = document.querySelector('.tab-container');
const tabMenuItems = tabContainer.querySelectorAll('ul li');
const tabContents = tabContainer.querySelectorAll('.tab-content');
tabMenuItems.forEach(tabMenuItem => {
tabMenuItem.addEventListener('click', () => {
tabMenuItems.forEach(item => {
item.classList.remove('selected');
});
tabMenuItem.classList.add('selected');
tabContents.forEach(tabContent => {
tabContent.classList.remove('selected');
});
document.getElementById(tabMenuItem.dataset.id).classList.add('selected');
});
});