forked from nico3333fr/jquery-accessible-tabs-aria
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample.html
100 lines (84 loc) · 2.39 KB
/
sample.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Example tabs</title>
<meta charset="utf-8" />
<meta name="author" content="Nicolas Hoffmann" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="http://rocssti.net/downloads/rocssti-fr.css" />
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://a11y.nicolas-hoffmann.net/tabs/js/jquery-accessible-tabs.js"></script>
<style>
.tabs__tabcontent[aria-hidden=true] {
display: none;
}
.tabs__link {
text-decoration: none;
}
.tabs__link:focus, .tabs__link:hover, .tabs__link:active, .tabs__link[aria-selected="true"] {
color: #f00;
}
#page {
width: 960px;
}
</style>
</head>
<body role="document">
<div id="page">
<h1>Tabs example</h1>
<div class="tabs">
<ul class="tabs__list row w100" data-hx="h2">
<li class="tabs__item col 25">
<a href="#id_first" id="label_id_first" class="tabs__link">1st tab</a>
</li>
<li class="tabs__item col 25">
<a href="#id_second" id="label_id_second" class="tabs__link">2nd tab</a>
</li>
<li class="tabs__item col 25">
<a href="#id_third" id="label_id_third" class="tabs__link">3rd tab</a>
</li>
<li class="tabs__item col 25">
<a href="#id_fourth" id="label_id_fourth" class="tabs__link">4th tab</a>
</li>
</ul>
<div id="id_first" class="tabs__tabcontent">
here the content of 1st tab
</div>
<div id="id_second" class="tabs__tabcontent">
here the content of 2nd tab
</div>
<div id="id_third" class="tabs__tabcontent">
here the content of 3rd tab, with a select with an id="id_in_tab"
<select name="fdsfdsf" id="id_in_tab">
<option value=""></option>
<option value="12">1241</option>
</select>
</div>
<div id="id_fourth" class="tabs__tabcontent">
here the content of 4th tab
</div>
</div>
<br><br>
<div class="tabs">
<ul class="tabs__list row w100" data-existing-hx="h2">
<li class="tabs__item col w50">
<a href="#suite" id="label_suite" class="tabs__link">Other </a>
</li>
<li class="tabs__item col w50">
<a href="#autresuite" id="label_autresuite" class="tabs__link">Other other</a>
</li>
</ul>
<div id="suite" class="tabs__tabcontent">
<h2>plop</h2>
other
</div>
<div id="autresuite" class="tabs__tabcontent">
<h2>toto</h2>
other other
</div>
</div>
<br><br><br>
</div>
</body>
</html>