✔ DIV in Navi behält Hintergrundfarbe nicht beim Klick

loddarmattheus

loddarmattheus

Erfahrenes Mitglied
Hallo,
wie die Überschrift schon besagt, behält mein DIV (Beispiel 1 und 2) beim Anklicken nicht die Hintergrundfarbe; Beispiel 3 dagegen schon:
HTML: 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Beispiel 3: Navigationsleisten mit 'Rollover'</title>
  <style>
  body {
  font: normal 1em Helvetica, Arial, sans-serif;
  }
  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:focus,
  nav a:hover { 
  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;
}
</style>
</head>
<body>
  <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>Hier stehen so viele Details, dass man um das Scrollen nicht drum rum kommt.</p>
     <p>Hier
       <br>ist
       <br>viel
       <br>Text
       <br>
     </p>
     <p>Hier
       <br>ist
       <br>viel
       <br>Text
       <br>
     </p>
     <p>Hier
       <br>ist
       <br>viel
       <br>Text
       <br>
     </p>
     <p>Hier
       <br>ist
       <br>viel
       <br>Text
       <br>
     </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>Das passt in das Element hinein, ohne dass gescrollt werden muss.</p> <a class="close"
     id="c2" href="#c2" title="schließen">schließen</a> </div>
     <div id="d3" class="details">
       <h3>Details zum 3. Eintrag</h3>
       <p>Auch ein Bild wäre kein Problem. <img src="http://src.selfhtml.org/forum/fachlich-hilfreich-32.png"
         alt="fachlich hilfreich">
       </p> <a class="close" id="c3" href="#c3" title="schließen">schließen</a> </div>
   
</body>
</html>
Wenn man auf Beispiel 1 oder 2 klickt, wird ein Info-DIV geöffnet, aber der Button Beispiel 1 und 2 behält beim Anklicken die Hintergrundfarbe gelb nicht.

Der letzte Button Beispiel 3 dagegen hat einen Blindverweis im href-Tag: Da bleibt die Farbe beim Anklicken gelb - was mach ich falsch, dass beim Anklicken von Beispiel 1 und 2 die Hintergrundfarbe nicht gelb bleibt?

Danke Karl M.
 
Zuletzt bearbeitet von einem Moderator:
Mhhmm...

dann frag ich mal anders: wie müßte denn der CSS-Style aussehen, damit die goldene Farbe beim Anklicken bleibt? Oder geht das gar nicht?
 
Ok, danke erstmal.
Aber ich wüsste nicht mal, wonach ich da googlen soll? Code-Snippet DIV javascript?
Das liefert 3.000.000 Ergebnisse - die meisten auf English.
 
Hallo,

hab doch was gefunden, aber ein klitzkleines Problem hab ich da:
HTML: 
//Add the following CSS and JavaScript within the <head></head> of your web page.

//Shows the first container and hides the others.
<style type="text/css">
#container2, #container3 {
    display:none;
    height:auto;
    overflow:hidden;
}

    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:focus,
    nav a:hover {   
      color: royalblue;
      background-color: gold;
      border-color: gold;
    }
</style>

//Set display:none for the hidden containers, switch to display:block for the visible container.
<script type="text/javascript">
function showDiv(idInfo) {
  var sel = document.getElementById('containers').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById('container'+idInfo).style.display = 'block';
  $(this).addClass('current');
  return false;
}
</script>

//Place the navigation and containers within the <body></body> of your web page where you want them displayed.
<nav>
<ul>
  <li><a href="javascript:void(0);" onClick="return showDiv('1')" title="Container 1" rel="nofollow">Container 1</a></li>
  <li><a href="javascript:void(0);" onClick="return showDiv('2')" title="Container 2" rel="nofollow">Container 2</a></li>
  <li><a href="javascript:void(0);" onClick="return showDiv('3')" title="Container 3" rel="nofollow">Container 3</a></li>
</ul>
</nav> 
<div id="containers">
    <div id="container1"> Container 1 </div>
    <div id="container2"> Container 2 </div>
    <div id="container3"> Container 3 </div>
</div>

Der erste Container ist richtig beim Start ausgewählt und wird auch angezeigt. Aber schön wäre es, wenn auch der Hintergrund des ersten Button "aktiv" ist, also gelb.

Könnte mir bitte jemand kurz helfen? Danke!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück