• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Button aktive machen funktioniert nicht mehr

R

RazorFive

Neues Mitglied
Hallo,

da ich hier und in Sachen Html neu bin, benötige ich eure Hilfe.

Ich habe mir mit Html eine kleine Webseite erstellt. 3 Html Dateien (index.htnl, galerie.html und impressum.html). Nun habe ich aus diesen 3 Html Dateien eine gemacht. Ebenfalls die Inhalte der 3 Dateien in eine gepackt. Danach habe ich die Anker definiert und einen Verweis zu den Ankern erstellt. Klappt wunderbar. Wenn ich auf meine Buttons klicke, scrollt die Seite genau da hin, welches das Thema ist. Leider gibt es ein kleines Problem, das ich nicht in den Griff bekomme.

Ich habe meine Buttons mit Farben hinterlegt. Als es noch 3 Html Seiten waren, hat es mit dem Hover und Active funktioniert. Jetzt nachdem ich eine Seite daraus gemacht habe, funktioniert nur noch das hovern und active ist immer nur der erste Button. Und das ist mein Problem.

Hier der Html und Css Code:

html
<li><a href="#home"class="active">Startseite</a></li>
<li><a href="#galerie">Galerie</a></li>
<li><a href="#impressum">Impressum</a></li>

CSS
#navigation li a:hover {
background-color: green;
color: #fff; }

#navigation li a.active {
background-color: green;
color: #fff; }

Ich hoffe Ihr könnt mir weiter helfen

Im Voraus vielen Dank

Andi
 
Werbung:
Die active-Klasse müsstest Du entweder mit PHP serverseitig oder mit JavaScript setzen. Mit reinem HTML und/oder CSS geht das was Du willst (derzeit) nicht.
 
Hallo, vielen Dank für die Antwort. Wie würde es mit JavaScript aussehen. Leider habe ich überhaupt keine Ahnung von JavaScript. Ich habe zwar schon ein JavaScript in meine Seite eingebaut, aber selbst geschrieben noch nie.

Mfg

Andi
 
Werbung:
Ich denke du müsstest an jeden Link ein onclick-Event hängen, welches bei allen anderen Links die active-Klasse entfernt und bei dem angeklickten Link die Klasse setzt. Das ginge z.B. so:

Code: 
function menuclick( obj ) {
 var links = obj.parentNode.getElementsByTagName("a");
 for( var l=0;l<links.length;l++ ) {
  links[l].className = "";
 }
 obj.className = "active";
 return false;
}

Aufrufbar mit:
HTML: 
<li><a href="#anker" onclick="return menuclick(this);">Startseite</a></li>

Wenn Du statt reinem JavaScript die Bibliothek jQuery nutzen willst wäre es einen Tick kürzer.
 
Hallo, vielen Dank für die Antwort. Leider bekomme ich das nicht hin. Das mit dem html ist verständlich. Der Code oben müsste Javascript sein, wenn ich mich nicht täusche. Wo und wie muss ich den hineinpacken damit es klappt. Könnten Sie mir das irgendwie anders beschreiben, damit ich es besser verstehe.

Nochmals vielen Dank
Andi
 
Werbung:
HTML: 
<script>
function menuclick( obj ) {
var links = obj.parentNode.getElementsByTagName("a");
for( var l=0;l<links.length;l++ ) {
  links[l].className = "";
}
obj.className = "active";
return false;
}
</script>
Entweder im Head-Bereich oder vor dem schließenden Body-tag

<script>
....
</script
</body>

Ist deine Navi fest im oberen Breich fixiert? Wenn nicht kannst du dir das alles schenken.

Hab mal was probiert.
HTML: 
<!doctype html>
<html lang="de">
<head>
<title>Interne Verweise markieren</title>
<meta charset="UTF-8">
<style>

* {
 margin:0;
 padding:0;
 list-style:none;
 border:none;
 outline:none;
 box-sizing:border-box;
}

ul {
 float:left;
 position:relative;
}

li  {
 float:left;
 margin-right:1px;
 background:#09c;
}
ul a {
 display:block;
 width:150px;
 padding:10px;
 color:#fff;
 text-align:center;
 position:relative;
 z-index:99;
}

div {
 clear:left;
}


h3 , p {
 padding:20px;
}

#seite1:target,
#seite2:target,
#seite3:target {background:#eee;}

#seite1:target:after {
 content:"";
 position:absolute;
 top:0;
 left:0;
 width:150px;
 padding:20px 0;
 display:block;
 background:#aaa;
}

#seite2:target:after {
 content:"";
 position:absolute;
 top:0;
 left:151px;
 width:150px;
 padding:20px 0;
 display:block;
 background:#aaa;
}

#seite3:target:after {
 content:"";
 position:absolute;
 top:0;
 left:302px;
 width:150px;
 padding:20px 0;
 display:block;
 background:#aaa;
}

#home-top:target,
#impressum-top:target,
#kontakt-top:target  {
 background:#aaa;
}

#seite1:target {
 background:#eee:
}
</style>

</head>
<body id="top">

<ul>
  <li id="home-top"><a <a href="#seite1">Home</a></li>
  <li><a id="impressum-top" href="#seite2">Impressum</a></li>
  <li><a id="kontakt-top" href="#seite3">Kontakt </a></li>
</ul>

<div id="seite1">
<h3>Home</h3>
<p>Lorem</p>
<a href="#home-top">top</a>
</div>

<div id="seite2">
<h3>Impressum</h3>
<p>Lorem</p>
<a href="#impressum-top">top</a>
</div>

<div id="seite3">
<h3>Kontak</h3>
<p>Lorem</p>
<a href="#kontakt-top">top</a>
</div>

</body>
</html>

Guten Rutsch und ein frohes neues Jahr
 
Zuletzt bearbeitet:
Hallo,

vielen Dank für die Antworten. Den Html Code habe ich getestet. Genau so ist meine Navigation auch. Auch das Script habe ich eingebaut, haut aber nicht hin. Und nein sie ist nicht am oberen Rand fixiert, sie bewegt sich mit, bis an den oberen Rand und wird dann fixiert. Ich kann hovern, aber das Problem ist das active, das nicht funktioniert. Gesehen hab ich das zufällig auf dieser Seite (http://stefanmelz.de/).

Nochmals vielen Dank für euere Antworten und wünsche allen auch noch einen guten Rutsch ins neue Jahr.

Gruß Andi :)
 
Werbung:
Hallo zusammen,

ich wünsche euch allen ein gesundes, neues und erfolgreiches Jahr.

Vielen Dank für diesen Link. Genau das was ich gesucht habe. Die Navigation kann ich jetzt ganz oben platzieren, so wie ich das wollte. Noch eine Frage! ist es sehr aufwendig, diese Navigation beweglich zu machen, damit sie beim scrollen oben am Rand andockt. Mit (JS bzw. Jquery), denn damit kenne ich mich überhaupt nicht aus.

Im Voraus vielen Dank

Andi
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben