Navi --> aktiv geklickter Link andersfarbig

dih

Hallo, ich habe eine Navigationsmenü mit 4 Links. Bei Klick des jeweiligen Links
wird die Seite neu geladen, dabei soll der geklickte Link eine andere Farbe als die
anderen erhalten. Mein HTML-Code ist folgender:

HTML

<link href="navi.css" type="text/css" rel="stylesheet">
<div id="nav">
  <ul>
     <li><a href="08.navi.html?page=1"<?php if (@$_GET['page']  == '1') echo 'class="active"'; ?> >Link1</a></li>
     <li><a href="08.navi.html?page=1"<?php if (@$_GET['page']  == '1') echo 'class="active"'; ?> >Link2</a></li>
     <li><a href="08.navi.html?page=1"<?php if (@$_GET['page']  == '1') echo 'class="active"'; ?> >Link3</a></li>
  </ul>
</div>

Inhalt des Stylesheet: navi.css

Code

#nav {
   width: 800px;                   /* Breite des Bereichs */
   text-align: left;               /* Textausrichtung     */
   margin-top: 10px;               /* Außenabstand oben   */
   margin-bottom: 10px;            /* Außenabstand unten  */
   margin-left: 20px;              /* Außenabstand links  */
   margin-right: 15px;             /* Außenabstand rechts */
}
 
#nav ul {
   list-style: none;               /* keine Aufzählungspunkte */
}
 
#nav li {
   float:left;                     /* Anordnung links   */
   margin-left:15px;               /* Außenabstand links */
   width:90px;   

   background-color: silver;       /* Hintergrundfarbe   */
   border-top: 1px black solid;    /* Rahmenfarbe Auflistungpunkt oben */
   border-left: 25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom: 1px red solid;   /* Rahmenfarbe unten  */
   border-right: 2px blue solid;   /* Rahmenfarbe unten  */
   margin-top: 10px;               /* Außenabstand oben  */
   padding-top: 8px;               /* Innenabstand oben  */
   padding-bottom: 8px;            /* Innenabstand unten */
   padding-left: 8px;              /* Innenabstand links */
   padding-right: 8px;             /* Innenabstand rechts */
} 


.nav a.active
{
color: #FFF;
background-color: black;
padding: 5px 8px;
}

Alles anzeigen

Ich versuche also über die class "active" den aktuellen Link eine andere Hintergrundfarbe zu geben. Leider
funktioniert dies nicht. Kann es sein das er dies im CSS-File nicht findet? Ich habe auch schon folgende
Schreibweise versucht: #nav a.active hatte aaber auch nicht gebracht.

djheke

Deine Dateien müssen die Endung php haben, sonst wird kein php ausgeführt.
Aus .nav a.active mache #nav a.active
Du musst die pageID durchnummerieren 1 , 2 , 3 , 4 sonst sind alle links markiert.

index.php

PHP

<!DOCTYPE html>


<html lang="de">
<head>
    <meta charset="utf-8">
    <title>aktiv</title>
 <style>


* {
 margin:0;
 padding:0;
 list-style: none; 
 text-decoration:none;
}
#nav {
width: 100%; 
float:left;   
margin-bottom:20px;               


}


#nav li {
   float:left;                    
   width:90px;   
 } 


#nav a {
 display:block;
 color:#000;
 padding:5px;
 text-align:center;
 font-weight:bold;
}


#nav a.active {
color: #FFF;
background-color: black;
}
</style>     
</head>
<body>
<?php if (!isset($_GET['page'])) { $_GET['page'] ="1";}?>
 <div id="nav">
  <ul>
     <li><a href="/?page=1"<?php if ($_GET['page']  == '1') echo ' class="active"'; ?> >Link1</a></li>
     <li><a href="/?page=2"<?php if ($_GET['page']  == '2') echo ' class="active"'; ?> >Link2</a></li>
     <li><a href="/?page=3"<?php if ($_GET['page']  == '3') echo ' class="active"'; ?> >Link3</a></li>
  </ul>
</div>
<?php include($_GET['page'].".inc"); // Dateien 1.inc , 2.inc , 3.inc einbinden?>
</body>
</html>

Alles anzeigen

dih

Ok, danke hat funktioniert. Kann man auch dann auch gleichzeitig beim Listenelement die Farbe mit ändern? Ich habe mal folgendes
versucht:

Code

#dnav li.auswahl
{
background-color: black;
}

Leider hat sich da nichts geändert. Man kann vermutlich nur die Farbe der Links bei Klick ändern oder?

Gastl

Zitat von dih

Man kann vermutlich nur die Farbe der Links bei Klick ändern oder?

Nö, man kann alle Links einfärben:

Zitat

A:link
{
COLOR: #0080FF;
}
A:visited
{
COLOR: #000080;
}
A:active
{
COLOR: #00A0FF;
}
A:hover
{
COLOR: #FF0000;
}

Alles anzeigen

Was du suchst ist wahrscheinlich visited?

Tags