Trädvy Permalänk
Medlem
Plats
Sverige
Registrerad
Maj 2005

Javascript och visibility

Har ett par div-taggar med olika id som jag vid en knapptryckning vill göra osynliga, och sedan visa en av dem.

Går det att på något sätt släcka dem alla på en gång, eller måste man loopa igenom dom?

// TODO: 1. Gör alla divs osynliga document.getElementById('content1-n').style.visibility = "hidden"; // 2. Visa vald div (ex. "content1") document.getElementById('content1').style.visibility = "visible";

Bro!

Trädvy Permalänk
Medlem
Registrerad
Aug 2002

Mitt råd är att du sätter en class på dina div-taggar som du vill kunna ändra visibility på. Därefter samlar du alla taggar i en array med en GetElementsByClass-funktion.

Det finns tyvärr ingen native funktion för det i javascript, utan man får skriva sin egen funktion. Finns lite olika färdiga exempel på nätet.

Sedan loopar man helt enkelt igenom arrayn.

Jag rekommederar att du använder dig av ett javascript-ramverk såsom mootools eller jQuery där det finns så mycket färdiga funktioner för att samla element osv. När du väl börjat använda ett javascript-ramverk så kommer du vilja ha med det i alla webprojekt framöver jag lovar.

Sony Vaio FE21M

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

Om du ska göra detta i jQuery:

$(function(){ // när DOM laddats $('.content').hide(); // Göm alla divar med klassen content //$('div[id*=content]').hide(); // Eller gör såhär: göm alla divar // vars id innehåller ordet content $('#minKnapp').click(function(){ // När man klickar på id="minKnapp" $('#content' + $(this).attr('href')).show(); // Visa diven #content2 }); });

HTML:

<a id="minKnapp" href="2">Visa div 2</a> <div id="content1" class="content">Content 1</div> <div id="content2" class="content">Content 2</div> <div id="content3" class="content">Content 3</div>

Har inte testat detta, men det borde vara nära körbart.

Trädvy Permalänk
Medlem
Plats
Sverige
Registrerad
Maj 2005

Tackar, kör på den

Bro!