beninca.link/marc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

subtabs test

Browse source
This commit is contained in:
Marc Beninca 2023-06-30 18:00:14 +02:00
parent 5a51675c12
commit 5d4dcf42eb
2 changed files with 107 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
test.css Normal file
View file

@ -0,0 +1,33 @@
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs > input {
display: none;
}
.tabs > input:checked + label + div {
display: block;
}
.tabs > label {
order: 1;
}
.tabs > div {
display: none;
flex-basis: 100%;
order: 2;
}
/**/
.tabs {
border: 1px solid;
}
.tabs > input:checked + label {
background-color: gray;
}
.tabs > label {
padding: 10px;
}
.tabs > div {
padding: 10px;
}

74
test.html Normal file
View file

@ -0,0 +1,74 @@
<!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 update(id) {
console.log(id)
}
function main() {
let tab = (new URL(document.location)).searchParams.get('tab')
if (tab) {
let path = 'tab'
let tabs = tab.split('/')
for (tab of tabs) {
path = `${path}/${tab}`
document.getElementById(path).checked = true
}
}
}
</script>
<!----------------------------------------------------------------------------->
</main></body></html>