Beste,
ik heb het volgende:
Javascript
[JS]<script type="text/javascript" language="javascript">
function navigationAllInactive() {
onavigation = document.getElementById('navigation');
oLis = onavigation.getElementsByTagName('LI');
for (i = 0; i < oLis.length; i++) {
oLis.className = ''; }}
function hideAllcontent() {
ocontent = document.getElementById('content');
oDivs = ocontent.getElementsByTagName('DIV');
for (i = 0; i < oDivs.length; i++) { oDivs.style.display = 'none'; }}
function doShow(o, pageId) {
hideAllcontent();
navigationAllInactive();
o.className = 'active';
ocontent = document.getElementById(pageId);
ocontent.style.display = 'block';
return false;}
</script>[/JS]
De css:
De aanroepgedeeltelijk)
Nu wil ik bereiken , dat waneer ik een tab open doe, de andere tab verdwijnt(in totaal een tab of vijf.
Dus dat er maar eentje tegelijk open is, maar ik ben clueless na een aantal uren proberen..
IEmand een idee?
ik heb het volgende:
Javascript
[JS]<script type="text/javascript" language="javascript">
function navigationAllInactive() {
onavigation = document.getElementById('navigation');
oLis = onavigation.getElementsByTagName('LI');
for (i = 0; i < oLis.length; i++) {
oLis.className = ''; }}
function hideAllcontent() {
ocontent = document.getElementById('content');
oDivs = ocontent.getElementsByTagName('DIV');
for (i = 0; i < oDivs.length; i++) { oDivs.style.display = 'none'; }}
function doShow(o, pageId) {
hideAllcontent();
navigationAllInactive();
o.className = 'active';
ocontent = document.getElementById(pageId);
ocontent.style.display = 'block';
return false;}
</script>[/JS]
De css:
Code:
<style>
#tab {
padding: 15px;}
#tab #navigation {
margin-bottom: 0px;
margin-left: 0px;
margin-top:5px;}
#tab {
h4st-style: none;
margin: 0px;
padding: 0px;}
#tab
#navigation h4 {
display: inline;
padding: 4px 15px;
cursor: pointer;
background-image:url(img/but_nav_geel.png);
border: 1px solid #3da0d4;
border-bottom: none;
margin-right: 0px;}
#tab #navigation h4.active {
}
#tab #navigation h4:hover {
padding:8px 20px;
background-image:url(img/but_nav_blauw.png);
color:#FFFFFF}
#tab #content {
margin-top: 3px;}
#tab #content div {
display: none;
border: 1px solid #3da0d4;
padding: 10px;}
#tab #content div.active {
display: block;}
</style>
De aanroepgedeeltelijk)
HTML:
echo'<div id= "tab">
<div id="navigation">
<h4 onclick="javascript:doShow(this, \'een\');">Algemeen</h4>
<h4 onclick="javascript:doShow(this, \'twee\');">Faciliteiten</h4>
<h4 onclick="javascript:doShow(this, \'drie\');">Accommodatie</h4>
<h4 onclick="javascript:doShow(this, \'vier\');">Prijsoverzicht</h4>
<h4 onclick="javascript:doShow(this, \'vijf\');">Vluchtinfo</h4>
</div> <div id="content">
<div id="een" class="active">
<h3>'. $naam.'</h3>
'.$infoAlgemeen.'
</div>
Nu wil ik bereiken , dat waneer ik een tab open doe, de andere tab verdwijnt(in totaal een tab of vijf.
Dus dat er maar eentje tegelijk open is, maar ik ben clueless na een aantal uren proberen..
IEmand een idee?