Ergebnis 1 bis 4 von 4

Thema: Navi --> aktiv geklickter Link andersfarbig

  1. #1
    Youngster
    Registriert seit
    08.06.2015
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Navi --> aktiv geklickter Link andersfarbig

    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-Code:
    <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;
    }
    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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Navi --> aktiv geklickter Link andersfarbig

    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-Code:
    <!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>
    Geändert von djheke (12.06.2015 um 11:57 Uhr)

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    08.06.2015
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Navi --> aktiv geklickter Link andersfarbig

    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?

  4. #4
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.151
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

    Standard AW: Navi --> aktiv geklickter Link andersfarbig

    Zitat Zitat von dih
    Man kann vermutlich nur die Farbe der Links bei Klick ändern oder?
    Nö, man kann alle Links einfärben:

    A:link
    {
    COLOR: #0080FF;
    }
    A:visited
    {
    COLOR: #000080;
    }
    A:active
    {
    COLOR: #00A0FF;
    }
    A:hover
    {
    COLOR: #FF0000;
    }
    Was du suchst ist wahrscheinlich visited?
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

Ähnliche Themen

  1. Link ist nicht auf dem ganzen Bild "aktiv"
    Von nadjak im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 27.01.2015, 12:24
  2. frage zu .aktiv
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 09.01.2013, 23:15
  3. Buttonfläche nicht vollständig für Link aktiv
    Von Freekiter im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 11.07.2007, 18:08
  4. Navigation nur ausblenden, wenn Link nicht aktiv
    Von amir im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 27.03.2007, 19:46
  5. neue navi bei jedem link
    Von Gr0nic im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 18
    Letzter Beitrag: 20.08.2005, 12:45

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •