85 lines
2.8 KiB
HTML
85 lines
2.8 KiB
HTML
<!DOCTYPE html><html><head>
|
|
<!----------------------------------------------------------------------------->
|
|
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="initial-scale=1,width=device-width" />
|
|
<link rel="stylesheet" href="test.css" />
|
|
|
|
<!----------------------------------------------------------------------------->
|
|
</head>
|
|
<body onload="main()"><header>
|
|
<!----------------------------------------------------------------------------->
|
|
|
|
<h1>Tabs</h1>
|
|
<ul>
|
|
<li><a href="test.html">test.html</a></li>
|
|
<li><a href="test.html?tab=2/3">test.html?tab=2/3</a></li>
|
|
</ul>
|
|
|
|
<!----------------------------------------------------------------------------->
|
|
</header><main>
|
|
<!----------------------------------------------------------------------------->
|
|
|
|
<div class="tabs">
|
|
<input type="radio" id="tab/1" name="tab" onclick="update(id)">
|
|
<label for="tab/1">Tab: 1</label>
|
|
<div>
|
|
<div class="tabs">
|
|
<input type="radio" id="tab/1/1" name="tab/1" onclick="update(id)">
|
|
<label for="tab/1/1">Tab: 1 / 1</label>
|
|
<div>Tab: One / One</div>
|
|
<input type="radio" id="tab/1/2" name="tab/1" onclick="update(id)">
|
|
<label for="tab/1/2">Tab: 1 / 2</label>
|
|
<div>Tab: One / Two</div>
|
|
<input type="radio" id="tab/1/3" name="tab/1" onclick="update(id)">
|
|
<label for="tab/1/3">Tab: 1 / 3</label>
|
|
<div>Tab: One / Three</div>
|
|
</div>
|
|
</div>
|
|
<input type="radio" id="tab/2" name="tab" onclick="update(id)">
|
|
<label for="tab/2">Tab: 2</label>
|
|
<div>
|
|
<div class="tabs">
|
|
<input type="radio" id="tab/2/1" name="tab/2" onclick="update(id)">
|
|
<label for="tab/2/1">Tab: 2 / 1</label>
|
|
<div>Tab: Two / One</div>
|
|
<input type="radio" id="tab/2/2" name="tab/2" onclick="update(id)">
|
|
<label for="tab/2/2">Tab: 2 / 2</label>
|
|
<div>Tab: Two / Two</div>
|
|
<input type="radio" id="tab/2/3" name="tab/2" onclick="update(id)">
|
|
<label for="tab/2/3">Tab: 2 / 3</label>
|
|
<div>Tab: Two / Three</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function check(tab) {
|
|
const tabs = tab.split('/')
|
|
let path = 'tab'
|
|
for (tab of tabs) {
|
|
path = `${path}/${tab}`
|
|
document.getElementById(path).checked = true
|
|
}
|
|
}
|
|
function push(tab) {
|
|
window.history.pushState(null, null, `?tab=${tab}`)
|
|
}
|
|
function update(id) {
|
|
const tab = id.split('/').slice(1).join('/')
|
|
push(tab)
|
|
}
|
|
function main() {
|
|
let tab = (new URL(document.location)).searchParams.get('tab')
|
|
if (tab) {
|
|
check(tab)
|
|
} else {
|
|
tab = '1/1'
|
|
check(tab)
|
|
push(tab)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!----------------------------------------------------------------------------->
|
|
</main></body></html>
|