Je zult moeten onthouden waar je op geklikt hebt. Verder denk ik niet dat "content" een geldige waarde is voor de CSS-property "display" :p.
En je moet waarschijnlijk ook op een of andere unieke manier kunnen nagaan waar je precies op geklikt hebt, nu hebben alle data-id velden dezelfde naam.
Wat mij ook vreemd overkomt is dat je refereert aan een echt id (je gebruik het hash-teken (#)) maar in je HTML komen geen id's voor?
inderdaad oals thomas aangeeft zijn je classes niet uniek. Je zou voor elk blokje class="content" ook een andere naam kunnen geven.
En de logo's hun eigen functie geven waar je kan aangeven welke class die moet verbergen.
En of met id's werken, logo een id geven, waarbij je die id ook gebruik in de content bijv. id=content_1, dan heb je maar 1 functie nodig.
@Thomas, content is wel degelijk een css attribuut. Ik gebruik het weleens op tables om het van horizontaal naar verticaal te veranderen en dan de 1e td een content te geven via css :)
Of t correct is zoals Jan ermee omgaat is een ander verhaal
p.s. bij mij werkt het nooit fijn om een string te combineren om als jQ object te gebruiken. Ik maak altijd een var waar ik # en de naam combineer bij dynamische objecten, die ik vervolgens in $(myVar)... gebruik
Stel dat ik de logo's een eigen functie geeft en deze koppel aan de content.
Dan moet ik alsnog communiceren dat wanneer content block 1 op display staat de rest gehide moet worden.
Ik ben nog geen kei in JS vooral jquery niet. Ff globaal wat ik wil doen.
Klik je op logo 1, dan moet content block1 verschijnen.
Klik je op logo 2, dan moet content block2 verschijnen.
Hoe zit ik dit heel basic kunnen oplossen met pure JS.
geef je contentblocks allemaal een id="block1" , block2, block3
en een class="somecontent"
Logo's een class="logo" en id="1" nummer welke correspondeerd met de nummers van block1, 2, 3 enz
$('.logo').on("click",function() {
var curID = $(this).attr("id"); //Verkrijg de id van het geklikte logo
var contentBlock = "#block" + curID; //Maak string met de corresponderende block
$('.somecontent').hide(); //Verberg alle blocks met class="somecontent"
$(contentBlock).show(); //contentBlock weergeven
});
