Display, visa/dölja div:ar

Hej!

Håller på med olika tabbar som ska visas/döljas när man klickar på en länk. Får det inte att funka som jag vill. Var kan felet dölja sig måntro? ;)

<script type="text/javascript">

function info()
{
document.getElementById("info").style.display = "block";
document.getElementById("infotab").style.color = "#E8CD96";
document.getElementById("booking").style.display = "none";
document.getElementById("bokningtab").style.color = "#000";
document.getElementById("villkor").style.display = "none";
document.getElementById("villkortab").style.color = "#000";
}

						
function booking()
{
document.getElementById("villkor").style.display = "none";
document.getElementById("villkortab").style.color = "#E8CD96";
document.getElementById("booking").style.display = "block";
document.getElementById("bokningtab").style.color = "#000";
document.getElementById("info").style.display = "none";
document.getElementById("infotab").style.color = "#000";
}
	
function villkor()
{
document.getElementById("booking").style.display = "none";
document.getElementById("bokningtab").style.color = "#E8CD96";
document.getElementById("villkor").style.display = "block";
document.getElementById("villkortab").style.color = "#000";
document.getElementById("info").style.display = "none";
document.getElementById("infotab").style.color = "#000";
}

</script>
                    
                    
<div class="tabmenu">

<a href="javascript:info();">
<div class="tab" id="infotab" style="color:#000;">Info</div></a>
<a href="javascript:booking();">
<div class="tab" id="bookingtab">Bokning</div></a>
<a href="javascript:villkor();">
<div class="tab" id="villkortab">Villkor</div></a>
                                            
</div>
                        
						
<div id="info" style="display:block;" class="event">Ruta 1</div>
<div id="villkor" style="display:none;" class="event">Ruta 2</div>
<div id="booking" style="display:none;" class="event">Ruta 3</div>

Anton_L skrev:

Får det inte att funka som jag vill.

Är för lat för att läsa igenom din kod och leka spåkärring. Vad händer och vad vill du ska hända?

Du får nog bestämma dig för om tabben Bokning har id "bokningtab" eller "bookingtab". Du har skrivit olika i skriptet och på tabben.

Oldtimer skrev:

Du får nog bestämma dig för om tabben Bokning har id "bokningtab" eller "bookingtab". Du har skrivit olika i skriptet och på tabben.

Tack för att du uppmärksammade det. Tab är dock bara för färgen som visar vad som är aktivt. Som det är nu visas inte ens rätt div vid klick.

EDIT: Det var visst lösningen på allt! Tack!

I booking och villkor sätter du färgen till element. I booking() sätter du färgen på villkor och tvärtom. Dessutom har du satt färgen på ursprungstabben till #000 istället för #E8CD96.

Låt mig annars rekommendera följande struktur. Koden loopar igenom en lista med namnen på tabbarna. Om namnet matchar strängen som skickas med till funktionen så visas tabben, annars döljs den.

<script type="text/javascript">

function showTab(whichtab){
    // Lista över namnen på tabbarna
    var tabNames = ["info", "booking", "villkor"];

    // loopa igenom listan
    for(var i=0; i<tabNames.length; i++){
        if(whichtab == tabNames[i]){
            // Om det angivna namnet matchar listnamnet...
            document.getElementById(tabNames[i]).style.display = "block";
            document.getElementById(tabNames[i]+"tab").style.color = "#E8CD96";
        }else{
            // Om det angivna namnet inte matchar listnamnet...
            document.getElementById(tabNames[i]).style.display = "none";
            document.getElementById(tabNames[i]+"tab").style.color = "#000";
        }
    }
}
</script>
                    
                    
<div class="tabmenu">

<a href="javascript:showTab('info');">
<div class="tab" id="infotab" style="color:#E8CD96;">Info</div></a>
<a href="javascript:showTab('booking');">
<div class="tab" id="bookingtab">Bokning</div></a>
<a href="javascript:showTab('villkor');">
<div class="tab" id="villkortab">Villkor</div></a>
                                            
</div>
                        
						
<div id="info" style="display:block;" class="event">Ruta 1</div>
<div id="villkor" style="display:none;" class="event">Ruta 2</div>
<div id="booking" style="display:none;" class="event">Ruta 3</div>

Okej... ett inline-element (dina a-element) få inte ha ett block-element (dina div-element) om du nu skall validera din HTML kod.

Hur mycket få man ändra i din kod?

Med jquery (tjat) så bli det så mycket enklare att manipulera dina element:
http://jsbin.com/ojezex/3/edit

där man bara säger vad som skall visas och döljas + sätta en CSS klass(där design borde ligga) på hur det skall se ut om man har markerat