meeredere keren het zelfde javascript gebruiken
Ik zit met het volgende probleem. Ik heb een tab script gemaakt met js en css. Het werkt perfect, maar het probleem waar ik mee zit is, ik wil dit meerdere (50X) keren per pagina gebruiken. Ik weet dat ik de getallen gewoon kan veranderen maar dan zou ik 50 afzonderlijke scripts moeten gebruiken. Ik vraag me dus af of ik een universeel script kan maken?
Html code
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
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
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="container">
<script src="tab.js" type="text/javascript"></script>
<div class="button-con">
<div class="button">
<a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">1</a>
</div>
<div class="button middle">
<a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">2</a>
</div>
<div class="button">
<a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">3</a>
</div>
</div>
<div id="content_1" class="content">
content 1
</div>
<div id="content_2" class="content" style="display: none">
content 2
<div class="close">
<a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_3">X</a>
</div>
</div>
<div id="content_3" class="content" style="display: none">
content 3
<div class="close">
<a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_3">X</a>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="container">
<script src="tab.js" type="text/javascript"></script>
<div class="button-con">
<div class="button">
<a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">1</a>
</div>
<div class="button middle">
<a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">2</a>
</div>
<div class="button">
<a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">3</a>
</div>
</div>
<div id="content_1" class="content">
content 1
</div>
<div id="content_2" class="content" style="display: none">
content 2
<div class="close">
<a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_3">X</a>
</div>
</div>
<div id="content_3" class="content" style="display: none">
content 3
<div class="close">
<a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_3">X</a>
</div>
</div>
</div>
</body>
</html>
stylesheet.css
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
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
.container{
width: 150px;
border: 1px solid black}
.button-con{
width: 150px;
height: 50px;
border-bottom: 1px solid black;}
.button{
width: 48px;
height: 48px;
float:left;
background: red;
border: 1px solid green;}
.active{
background: black;}
.button a{
height:48px;
display:block;}
.button a:hover {
width:100%;
height: 100%;
display:block;
background: black;}
.content{
height: 100px;
width: 150px;
background:yellow;}
.close{
height: 20px;
width: 20px;
background: gray;
}
.close a{
height: 20px;
display: block;}
width: 150px;
border: 1px solid black}
.button-con{
width: 150px;
height: 50px;
border-bottom: 1px solid black;}
.button{
width: 48px;
height: 48px;
float:left;
background: red;
border: 1px solid green;}
.active{
background: black;}
.button a{
height:48px;
display:block;}
.button a:hover {
width:100%;
height: 100%;
display:block;
background: black;}
.content{
height: 100px;
width: 150px;
background:yellow;}
.close{
height: 20px;
width: 20px;
background: gray;
}
.close a{
height: 20px;
display: block;}
Tab.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById(new_tab).className = 'active';}
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById(new_tab).className = 'active';}
