Leuk tabbladen script
Laatst was ik op een site aan het rondsnuffelen die gebruik maakte van een navigatiebalk met vier menu knoppen. Daartussen kon je zeg maar tabben voor andere informatie.
Het irritante was dat de site daar elke keer opnieuw voor geladen moest worden, en dan kan soms wel even duren.
Daarom kwam ik op het idee om dat op te lossen, en hierbij het resultaat:
Code (php)
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
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
<html>
<head>
<title>Tabbladen</title>
<link href="tabbladen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function show(id) {
for(var i=1;i <= 4;i++) {
if (id == i) {
var display = 'block';
}
else {
var display = 'none';
}
document.getElementById('tab'+i).style.display = display;
}
}
</script>
</head>
<body>
<div id="container">
<ul id="tabnav">
<li><a class="list" onclick="show('1');">Tabblad 1</a></li>
<li><a class="list" onclick="show('2');">Tabblad 2</a></li>
<li><a class="list" onclick="show('3');">Tabblad 3</a></li>
<li><a class="list" onclick="show('4');">Tabblad 4</a></li>
</ul>
<div id="tabs">
<div id="tab1">Tab 1
</div>
<div id="tab2">Tab 2
</div>
<div id="tab3">Tab 3
</div>
<div id="tab4">Tab 4
</div>
</div>
</div>
</body>
</html>
<head>
<title>Tabbladen</title>
<link href="tabbladen.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
function show(id) {
for(var i=1;i <= 4;i++) {
if (id == i) {
var display = 'block';
}
else {
var display = 'none';
}
document.getElementById('tab'+i).style.display = display;
}
}
</script>
</head>
<body>
<div id="container">
<ul id="tabnav">
<li><a class="list" onclick="show('1');">Tabblad 1</a></li>
<li><a class="list" onclick="show('2');">Tabblad 2</a></li>
<li><a class="list" onclick="show('3');">Tabblad 3</a></li>
<li><a class="list" onclick="show('4');">Tabblad 4</a></li>
</ul>
<div id="tabs">
<div id="tab1">Tab 1
</div>
<div id="tab2">Tab 2
</div>
<div id="tab3">Tab 3
</div>
<div id="tab4">Tab 4
</div>
</div>
</div>
</body>
</html>
En de css code die hierbij hoort:
Code (php)
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
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
#container {
float: left;
margin: 1px;
padding: 0;
height: 625px;
width: 800px;
position: relative;
background-color: #999999;
}
#tabnav {
height: 37px;
list-style-type: none;
position: relative;
padding: 0 0 0 210px;
margin: 0;
background-color: #404040;
}
#tabnav li {
float: left;
margin: 8px;
}
.list {
background: url(menubutton.gif) #fff bottom left repeat-x;
width: 80px;
display: block;
border: 1px solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
a:hover {
cursor: pointer;
}
#tabs {
top: 75px;
left: 25px;
width: 750px;
height: 512px;
clear: both;
display: block;
position: absolute;
background-color: #404040;
}
#tab1 {
display: block;
}
#tab2 {
display: none;
}
#tab3 {
display: none;
}
#tab4 {
display: none;
}
float: left;
margin: 1px;
padding: 0;
height: 625px;
width: 800px;
position: relative;
background-color: #999999;
}
#tabnav {
height: 37px;
list-style-type: none;
position: relative;
padding: 0 0 0 210px;
margin: 0;
background-color: #404040;
}
#tabnav li {
float: left;
margin: 8px;
}
.list {
background: url(menubutton.gif) #fff bottom left repeat-x;
width: 80px;
display: block;
border: 1px solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
a:hover {
cursor: pointer;
}
#tabs {
top: 75px;
left: 25px;
width: 750px;
height: 512px;
clear: both;
display: block;
position: absolute;
background-color: #404040;
}
#tab1 {
display: block;
}
#tab2 {
display: none;
}
#tab3 {
display: none;
}
#tab4 {
display: none;
}
een online voorbeeld en het plaatje voor de menu button is te vinden op: www.stevenhack.nl/tabbladen.php en www.stevenhack.nl/menubutton.gif
Dit leek me wel iets waar je veel mee zou kunnen doen, en wat je ook goed kunt toepassen in combinatie met php. Ik dacht, leg het even voor op het forum om te kijken wat mensen er van vinden en dan kan ik het later nog uploaden bij scripts eventueel :)
Voor het javascript gedeelte gaat de eer naar WillemJan Z en Barry. Die hebben mij op weg geholpen met dit handige javascript.
In IE werkt de mouseover cursor pointer niet. Dit is volgens mij wel op te lossen met wat gepeupel, maar daar ga ik verder niet op in.
Gewijzigd op 01/01/1970 01:00:00 door Steven Hack
Volgens mij zie je dit ook bij bijvoorbeel het spel darkthrone?
BTW. Script werkt ook niet in FF 3 bij mij.
Verder weet ik niets van het spel darkthrone, dus dat kan best.
Ik kwam echter achter het probleem op bungie.net, toen ik mijn stats van halo 3 wilde bekijken :)
Offtopic:
kan je me nog heel even helpen op mijn topic met me css:P
Vind het alleen overbodig om jquery of mootools hiervoor te gebruiken, vind het zoiezo vaak overbodig en niet echt scriptwaardig om zo'n framework te gebruiken.
Verder kom ik dit bijna nergens tegen, dus vond het wel uniek. Maargoed, misschien zijn er nog meer mensen waarvoor dit nieuw is of die dit toch handig vinden :)