-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtest.html
55 lines (48 loc) · 1.33 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://unpkg.com/xp.css"
>
<title>Document</title>
</head>
<body>
<script>
const tabs = document.querySelectorAll("menu[role=tablist]");
for (let i = 0; i < tabs.length; i++) {
const tab = tabs[i];
const tabButtons = tab.querySelectorAll("menu[role=tablist] > button");
tabButtons.forEach((btn) =>
btn.addEventListener("click", (e) => {
e.preventDefault();
tabButtons.forEach((button) => {
if (
button.getAttribute("aria-controls") ===
e.target.getAttribute("aria-controls")
) {
button.setAttribute("aria-selected", true);
openTab(e, tab);
} else {
button.setAttribute("aria-selected", false);
}
});
})
);
}
function openTab(event, tab) {
const articles = tab.parentNode.querySelectorAll('[role="tabpanel"]');
articles.forEach((p) => {
p.setAttribute("hidden", true);
});
const article = tab.parentNode.querySelector(
`[role="tabpanel"]#${event.target.getAttribute("aria-controls")}`
);
article.removeAttribute("hidden");
}
</script>
</body>
</html>