-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo.html
86 lines (83 loc) · 2.21 KB
/
demo.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
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Demo hash-tabs</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.hash-tabs.js"></script>
<script>
$(function(){
$('.wrapper-demo').hashTabs({
selectorTriggers: '> .triggers > .trigger',
selectorTabs: '> .tabs > .tab'
// clickCallback: function(targetTab){
// $('.wrapper-demo > .tabs > .tab').hide();
// $(targetTab).slideDown();
// }
});
$('.demo').hashTabs({
clickCallback: function(){
console.log('Click on ' + $(this).attr('href'));
},
openCallback: function() {
console.log('Open ' + $(this).attr('href'));
}
});
});
</script>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div class="wrapper-demo hash-tabs">
<nav class="triggers">
<a href="#html_box" class="trigger">Html</a>
<a href="#css_box" class="trigger">Css</a>
<a href="#js_box" class="trigger">Js</a>
<a href="#demo_box" class="trigger">Demo</a>
</nav>
<div class="tabs">
<div class="tab">
<pre>
<div class="demo">
<nav>
<a class="trigger">1 tab</a>
<a class="trigger">2 tab</a>
<a class="trigger">3 tab</a>
</nav>
<div>
<div class="tab">Первая закладка / First tab</div>
<div class="tab">Вторая закладка / Second tab</div>
<div class="tab">Третья закладка / Three tab</div>
</div>
</div></pre>
</div>
<div class="tab">
<pre>
.demo .tab {
display: none;
}
.demo .tab.active {
display: block;
}</pre>
</div>
<div class="tab">
<pre>$('.demo').hashTabs({});</pre>
</div>
<div class="tab">
<div class="demo">
<nav>
<a class="trigger">1 tab</a>
<a class="trigger">2 tab</a>
<a class="trigger">3 tab</a>
</nav>
<div>
<div class="tab">Первая закладка / First tab</div>
<div class="tab">Вторая закладка / Second tab</div>
<div class="tab">Третья закладка / Three tab</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>