tutorials.de - DIV in Navi behält Hintergrundfarbe nicht beim Klick

by SpiceLab

HTML

<nav>
  <ul>
    <li><a href="#d1">Beispiel 1</a></li>
    <li><a href="#d2">Beispiel 2</a></li>
    <li><a href="#r">Beispiel 3</a></li>
  </ul>
</nav>
<div id="d1" class="details">
  <h3>Details zum 1. Eintrag</h3>
  <p>...</p>
  <a class="close" id="c1" href="#c1" title="schließen">schließen</a> 
</div>    
<div id="d2" class="details">
  <h3>Details zum 2. Eintrag</h3>
  <p>...</p> 
  <a class="close" id="c2" href="#c2" title="schließen">schließen</a> 
</div>

CSS

nav ul {
  width: 10em;
  padding: 0.8em;
  border: 1px solid black;
  background-color: silver;
}
nav li {
  list-style: none;
  margin: 0.4em;
}
nav a {
  display: block;
  padding: 0.4em;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid blue;
  color: gold;
  background-color: royalblue;
}
nav a:hover,
nav a:focus,
nav .foobar {
  color: royalblue;
  background-color: gold;
  border-color: gold;
}
   
.details {
   position: absolute;
   right: 1em;
   top: 1em;
   background-color: #F1F3F4;
   border: 0.1em solid #3983ab;
   border-radius: 0 8px 8px;
   padding: 1em 1em .2em;
   width: 22em;
   max-height: 20em;
   overflow: auto;
   display: none;
}
.details h3 {
   margin-top: 0;
}
.details:target {
   display: block;
} 
.close {
   width: 0;
   heigh: 0;
   border: 0;
   text-shadow: none;
   color: transparent;
} 
.close:after {
   position: absolute;
   top: 1em;
   right: 1em;
   content: "X";
   color: white;
   background: #c32e04;
   font: font: bold 1em/150% Georgia, Times, serif;
   border: 0.1em solid #3983ab;
   border-radius: 0 8px 8px;
   display: block;
   text-align: center;
   width: 1.5em;
   height: 1.5em;
   padding: 0.2em 0 0 0em;
}

JavaScript

$("nav a").click(function() {            
  $("nav a").removeClass("foobar"); 
  $(this).addClass("foobar");
});