-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (67 loc) · 4.94 KB
/
index.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<link rel="stylesheet" type="text/css" media="all" href="jquery.simpleTabs.css" />
<title>jQuery simple tabs</title>
</head>
<body>
<div class="tabs">
<ul>
<li>
<a href="#tab1">tab1</a>
</li>
<li>
<a href="#tab2">tab2</a>
</li>
<li>
<a href="#tab3">tab3</a>
</li>
</ul>
<div class="tabs-content">
<div class="tab" id="tab1">
<h1>Tab 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget dignissim diam, nec tristique massa. Etiam rutrum vel leo sed fermentum. Sed in lacus ut orci tincidunt vulputate. Curabitur id libero quis massa venenatis ultrices. Donec egestas, erat sed tristique tincidunt, turpis eros venenatis dui, quis mattis nisi ipsum non mi. Nam lorem purus, auctor eu rutrum a, congue in velit. Etiam scelerisque blandit dui, ac facilisis magna tempor id. Maecenas congue tempor enim ac congue. Etiam ultricies urna in posuere mollis. Fusce molestie nunc eget lacus sagittis iaculis.
</p>
<p>
Sed pellentesque et dolor ac ullamcorper. Vestibulum aliquet dolor et enim pellentesque, nec aliquam quam fermentum. Mauris a rhoncus sem. Vivamus congue molestie elit, nec porttitor eros bibendum a. Pellentesque porttitor tortor vitae est tristique, vel congue lorem faucibus. Donec at congue mauris. Quisque posuere vel augue sed scelerisque.
</p>
<p>
Sed euismod mattis est, et lacinia lorem aliquam a. Sed ut enim tempor, tincidunt arcu ac, suscipit sem. Proin dapibus, elit facilisis dignissim aliquet, turpis quam iaculis neque, ut posuere risus arcu at dui. Sed dignissim purus id risus accumsan dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Phasellus pharetra lobortis tortor sed dapibus.
</p>
<p>
Praesent consectetur venenatis odio vel facilisis. Nullam quis erat dolor. Suspendisse potenti. Nunc non lacinia arcu, id condimentum turpis. Quisque eu faucibus leo, eget molestie augue. Aenean et velit consequat, hendrerit felis nec, placerat lectus. Pellentesque sed vulputate erat. Phasellus odio purus, pellentesque ac accumsan sit amet, imperdiet eget est. Suspendisse non augue sed justo consectetur bibendum.
</p>
</div>
<div class="tab" id="tab2">
<h1>Tab 2</h1>
<p>
Sed pellentesque et dolor ac ullamcorper. Vestibulum aliquet dolor et enim pellentesque, nec aliquam quam fermentum. Mauris a rhoncus sem. Vivamus congue molestie elit, nec porttitor eros bibendum a. Pellentesque porttitor tortor vitae est tristique, vel congue lorem faucibus. Donec at congue mauris. Quisque posuere vel augue sed scelerisque.
</p>
<p>
Sed euismod mattis est, et lacinia lorem aliquam a. Sed ut enim tempor, tincidunt arcu ac, suscipit sem. Proin dapibus, elit facilisis dignissim aliquet, turpis quam iaculis neque, ut posuere risus arcu at dui. Sed dignissim purus id risus accumsan dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Phasellus pharetra lobortis tortor sed dapibus.
</p>
<p>
Praesent consectetur venenatis odio vel facilisis. Nullam quis erat dolor. Suspendisse potenti. Nunc non lacinia arcu, id condimentum turpis. Quisque eu faucibus leo, eget molestie augue. Aenean et velit consequat, hendrerit felis nec, placerat lectus. Pellentesque sed vulputate erat. Phasellus odio purus, pellentesque ac accumsan sit amet, imperdiet eget est. Suspendisse non augue sed justo consectetur bibendum.
</p>
</div>
<div class="tab" id="tab3">
<h1>Tab 3</h1>
<p>
Vestibulum eget rhoncus justo, vitae feugiat tortor. In metus diam, rhoncus mattis sodales a, commodo sed enim. Donec condimentum ante nisi, non ultricies lacus dictum non. Nunc in ligula imperdiet, consectetur eros egestas, tincidunt quam. Fusce sodales mauris a rutrum rutrum. Cras convallis, odio vitae imperdiet ultricies, libero sem porttitor dolor, sed iaculis turpis erat eu sapien. Sed vel elit condimentum, sodales diam in, aliquam neque. In hac habitasse platea dictumst. In porttitor nisi et velit tincidunt, id semper orci bibendum. Suspendisse lacinia pulvinar libero, id sollicitudin dolor egestas quis. Etiam vitae nibh non dui tincidunt facilisis. Aenean nec erat volutpat, elementum orci quis, consectetur velit. Donec at diam condimentum, blandit nisi nec, rutrum sapien.
</p>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.simpleTabs.js"></script>
<script>
$(document).ready(function(){
$('.tabs').simpleTabs();
});
</script>
</body>
</html>