72 lines
2.7 KiB
HTML
72 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tab Test</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Tab Active State Test</h1>
|
|
|
|
<div class="tabs-container">
|
|
<div class="tabs-header">
|
|
<button class="tab-button active" data-tab="status">Status</button>
|
|
<button class="tab-button" data-tab="endpoints">Endpoints</button>
|
|
<button class="tab-button" data-tab="tasks">Tasks</button>
|
|
<button class="tab-button" data-tab="firmware">Firmware</button>
|
|
</div>
|
|
|
|
<div class="tab-content active" id="status-tab">
|
|
<h3>Status Tab</h3>
|
|
<p>This is the status tab content.</p>
|
|
</div>
|
|
|
|
<div class="tab-content" id="endpoints-tab">
|
|
<h3>Endpoints Tab</h3>
|
|
<p>This is the endpoints tab content.</p>
|
|
</div>
|
|
|
|
<div class="tab-content" id="tasks-tab">
|
|
<h3>Tasks Tab</h3>
|
|
<p>This is the tasks tab content.</p>
|
|
</div>
|
|
|
|
<div class="tab-content" id="firmware-tab">
|
|
<h3>Firmware Tab</h3>
|
|
<p>This is the firmware tab content.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Simple tab functionality test
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tabButtons = document.querySelectorAll('.tab-button');
|
|
const tabContents = document.querySelectorAll('.tab-content');
|
|
|
|
tabButtons.forEach(button => {
|
|
button.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
const targetTab = this.dataset.tab;
|
|
|
|
// Remove active class from all buttons and contents
|
|
tabButtons.forEach(btn => btn.classList.remove('active'));
|
|
tabContents.forEach(content => content.classList.remove('active'));
|
|
|
|
// Add active class to clicked button and corresponding content
|
|
this.classList.add('active');
|
|
const targetContent = document.querySelector(`#${targetTab}-tab`);
|
|
if (targetContent) {
|
|
targetContent.classList.add('active');
|
|
}
|
|
|
|
console.log('Tab switched to:', targetTab);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |