Correct gebruik van ACTIVE element

dinsdag 8 augustus 2023 08:48

Acties:

Historie | Luxe | Duurzaam

Topicstarter

Ik wil graag een duidelijke "taal-switcher" gebruiken op onze boeking site, want de ingebouwde is niet zichtbaar genoeg. (onderin pagina) zie: https://www.casarodriguillo.com/

...

Omdat ik slechts 0.1% kennis heb van HTML heb ik onderstaande van W3schools afgehaald en wat aangepast. Echter blijft ENGLISH altijd op active staan, ook al springt de taal gewoon over.

...

Mijn vraag: hoe moet het "active" element wel gebruikt worden zodat het verwacht als ik zou denken? (dus overspringen naar geselecteerde taal)

code:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
}

li {
  float: left;
}

li a {
  display: block;
  color: #0c423c;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #f3c669;
}

.active {
  background-color: #f3c669;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="https://www.casarodriguillo.com/">English</a></li>
  <li><a href="https://www.casarodriguillo.com/es/">Español</a></li>
  <li><a href="https://www.casarodriguillo.com/nl/">Nederlands</a></li>
</ul>

</body>

www.casarodriguillo.com

dinsdag 8 augustus 2023 08:55

Acties:

Christoxz

Wat is het onderliggende systeem? Ik zie dat de talen wel netjes switchen, biedt de CMS geen styling voor dit?

Verder zal wat je willen niet met pure HTML gaan lukken, maar eventueel wel met Javascript, die kan dectecteren welke language er in de URL staat, en op basis daarvan de juiste List element markeren als active!

T.Net Creality 3D Printer Discord

dinsdag 8 augustus 2023 08:57

Acties:

Cyphax

Moderator LNX

Ik denk dat je iets wil doen met het active pseudo-element, je hebt nu in de html die post een anchor de class "active" gegeven, verandert dat ergens, of is er server-side code die de juiste taal die class moet geven?

De code achter de taalselectie op de pagina waar je naar linkt ziet er echter heel anders uit... hoe kan dat?

[edit]
Als ik noscript even uitzet (

) werkt ie zo te zien ook bij mij gewoon. In elk geval in Firefox.

Die active class lijkt zelfs goed gezet te worden.

[ Voor 21% gewijzigd door Cyphax op 08-08-2023 09:01 ]

Saved by the buoyancy of citrus

dinsdag 8 augustus 2023 11:10

Acties:

Pinin

Historie | Luxe | Duurzaam

Topicstarter

OK, bedankt voor jullie antwoorden. Waar ik al bang voor was is dat ik niet veel van jullie antwoorden begrijp door mijn gebrek aan kennis. Ik had gehoopt dat ik een simpel "foutje" had gemaakt dat makkelijk voor een leek is op te lossen.

www.casarodriguillo.com

Vraag

Alle reacties