Active Javascript menubar

Status
Niet open voor verdere reacties.

Seantf

Gebruiker
Lid geworden
23 apr 2013
Berichten
140
Heeey ik zie niet meer wat ik fout doe kan iemand mij hiermee helpen?
Ik probeer de active pagina te highlighte de hover doet het gewoon alleen zodra ik er op klik dan werkt de active niet.


Alvast hartelijk bedankt.

Code:
.topnav {
  overflow: hidden;
  background-color: black;

}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a.hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

Code:
         <script>
     
 $(document).ready(function(e){
  $('.topnav').click(function(e)){
    $('.topnav').removeClass('active');
    $(this).addClass('active');
  }
 }
  )
    
  </script>
  {% include 'header.html.twig'%}
    <body>
        <div class="topnav">
  <a href="{{ path('alleproducten') }}">Alle Producten</a>
  
  <a href="{{ path('alleproducttype') }}">Alle ProductType</a>
  
  <a href="{{ path('alleklanten') }}">Alle Klanten</a>
  
  <a href="{{ path('alleartikelen') }}">Alle Artikelen</a>
  </div>
 
Kan je hier mee verder... (html + css + js aangepast)
Code:
HTML

<div class="topnav">
  <a class="active" href="#a">Alle Producten</a>
  <a href="#b">Alle ProductType</a>
  <a href="#c">Alle Klanten</a>
  <a href="#d">Alle Artikelen</a>
</div>

CSS

.topnav {
  overflow: hidden;
  background-color: black;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.topnav a:active, .topnav a.active {
  background-color: #4CAF50;
  color: white;
}

Javascript

$(document).ready(function(e) {
  $('.topnav a').click(function(e) {
    $('.topnav a').removeClass('active');
    $(this).addClass('active');
  });
});

** aanvulling: dit werkt alleen binnen dezelfde pagina. Als je via <a href> naar een andere pagina gaat dan klopt je opzet niet. In dat geval krijgt iedere pagina een eigen class="active" bij de juiste <a href>

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan