Forum
Tipps
News
Frage stellen
search
Menu-Icon
search

Link Active

Hallöchen Leute,

ich versuche seit ca. zwei Stunden einen Link über CSS farblich anzupassen, wenn er activ ist.

Hover kein Problem. Nur hätte ich gerne, dass der Link anders aussieht, wenn man drauf gekickt hat, sprich die aktuelle Seite geöffnet ist.

 

Zitat
  <div id="navi">
    <ul>
      <li><a href="index.php?page=company" target="_self">Service</a></li>
      <li><a href="index.php?page=projects" target="_self">Projekte</a></li>
      <li><a href="index.php?page=team" target="_self">Team</a></li>
   

Wie würdet ihr den Effekt in der CSS einbauen? Der Hover ist über:

 
Zitat
#navi a:hover {
   color: #f90;
}

programmiert.

So sollte dies doch auch mit active gehen oder?

Mit Opera, FireFox und IE getestet. Funktioniert leider alles nicht.

Wenn es einen Weg über JavaScript gäbe wäre ich auch sehr erfreut darüber <3

Danke für eure Hilfe!!!

LG TDF =]
Moderator informieren  

Antworten zu Link Active:

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Zitat von: The Dark Freak am 06.04.10, 15:30:12
#navi a:hover {
   color: #f90;
}
wenn Du die Navi in jeder Seite mitnimmst dann definier eine Klasse .aktiv zum Beispiel hat hier der aktive Link dieselbe Farbe wie der mit Mouseover.

.aktiv {
   color: #f90;
}

Diese Klasse gibst Du dem aktiven Link mit
<a class="aktiv" href="#">Aktiver Link</a>

Gruß, der Rosslauer.de
Moderator informieren  

oder so:

Code: [Auswählen]
#navi a:focus {
                color: #f90;
                background-color: #FFFFFF;
               }

Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hallo Rosslauer,

die Seite soll ja nicht IMMER aktiv sein ;-) Sie soll ja nur Leuchten, wenn sie auch geöffnet ist. Klicke ich auf eine andere SEite in der NAvigation soll diese leuchten.

Hallo SQLFrak,

habe ich auch schon probiert. Läuft aber leider nicht :-/

Moderator informieren  

Eigentlich funktionierts so.
Hast Du's vllt. an anderer Stelle in der CSS ausgehebelt?

Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

wüsste nicht wo.

magst du dir meine CSS angucken?

200 Zeilen :-/

LG

Moderator informieren  

Normalerweise mache ich das so:

Du setzt eine ID für body:
<body id="startseite"> (index.html )
<body id="kontaktseite"> (kontakt.html )

für jede Seite anders.

Die Listenelemente bekommen auch eine ID
<li id="navi01"> für die Startseite
<li id="navi02"> für die Kontaktseite

usw.

in der CSS:

#navi a:hover,
#navi a:focus,
#startseite #navi01 a,
#kontaktseite #navi02 a           
                  {
               color: #ffffff;
                    background-color: #000077;
                    font-weight: bold;
                    border-bottom: none;   
                    border-left: 3px solid #000077;     
                  }


Nur als Beispiel.

Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hi

ich darf untertänigst meine HP als Muster\zur Verwendung anbieten

http://members.kabsi.at/erwin.billmaier/index.htm

die zugehörige .CSS heisst:

http://members.kabsi.at/erwin.billmaier/zglobal.css

Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hallöchen,

habe mir nun überlegt, dass ich aus der URL auslesen, auf welcher Seite sich der User befindet. Dadurch wird über eine IF-Else-Entscheidung festgestellt auaf welchen Link der User geklickt haben muss um die SEite zu öffnen. Und dieser bekommt als Egebnis eine andere ID zugewiesen als die anderen NAvigationspunkte.

Und dadurch erhalte ich meine Aktiv-Link <3

Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

hi,

1. ich würde da wohl eher switch nehmen.
2. kannst dir das auch komplett sparen wenn id und dateiname identisch sind. (so bleibts dann auch noch lesbarer als lbox01 oder so geschichten)

Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Switch?

Warum das?! :-D

In jeden Link kommt:

<a href="index.php?site=home" <?php if($_GET["site"]==home) { echo'class="aktiv"';}else {echo'class="navi"';}?>>

Ich hab den Code grad nicht getestet, sondern einfach so runtergeschrieben. Aber so in der Art habe ich mir das ganze vorgestellt =]

Über die Css bekommen class = aktiv und class = navi unterschiedliche Weter und fertig. =]

Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Zitat von: The Dark Freak am 09.04.10, 09:08:08
Switch?

Warum das?! :-D
sry, bin manchmal wirr im kopf. hab angefangen zu denken, nen haken geschlagen und dann mit ner anderen sache weitergedacht :D
(ich bin quasi spezialist im sich selbst überlisten :D *gggg)

bei den x if dingern wirst ja trotzdem ganz meschugge im kopf.
was hälstn von dem ansatz?

<?php
$navi = array(
    "home"  => "Startseite",
    "contact" => "E-Mail an mich",
    "agb"   => "AGB"
);

while (list($blub, $bla) = each($navi)) {
$class="normal";
if($blub==$_GET[&#39;site&#39;]){$class="aktiv";}
   echo &#39;<a href="index.php?site=&#39;.$blub.&#39;" target="_self" class="&#39;.$class.&#39;">&#39;.$bla.&#39;</a>&#39;;
    }
?>
das auch ** Netiquette! ** weil die if schleife halt auch bei jedem durchlauf noch mal abegfragt wird. lediglich die tippelarbeit wird für dich weniger und n ticken übersichtlicher isses auch, weil deine ganze navi halt ins obige array werfen könntest.
finde das trotzdem unelegant und n bissl ... hm... stupide *g

mir rollen sich bei meinem eigenem code die fussnägel hoch :D
ist halt allerdings auch nur ein denkansatz, evtl. hiflts dir ja.

eigentlich wollte ich irgend n mix machen aus der classen id, das mit switch halt in EINER schleife abfangen und dann ausgeben. aber da ist schon der erste denkfehler drin. es geht definitiv kürzer und einfacher. aber dafür bin cih einfach zu unkonzentriert grad (hey, is freitag *rausred :D) und ich hab da irgendwo im kopf nen haken zuviel geschlagen + mich jetzt n bissl verlaufen :(
 
Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

mhmm naja, meine Variante schaut einfacher aus :-D


Was für Server besser ist, bez. der Ladezeit, weiß ich nicht ;-)


Hier mein lauffähiger Code, wie ich ihn eingebaut habe.

Code: [Auswählen]
<ul>
      <li><a href="index.php?page=company" target="_self" <?php if($page=="company"){echo&#39;class="navi_link_aktiv"&#39;;} else {echo&#39;class="navi_link"&#39;;}?>>Service</a></li>
[... mehr links usw ...]
</ul>
und dann navi_link_aktiv und navi_link entsprechend formatiert =]

Wenn man erstmal die Idee hat 10 Minuten programmier arbeit, und dann hab ich noch ne Std gebrauht den Kram in eine bestehende Webseite einzubetten.

Wer es braucht kann es sich ja auch abwandeln.

Have Fun <3


BTW: Wie bekommst du deine Code so schön formatiert?! :-D Wie geht das hier?
« Letzte Änderung: 09.04.10, 13:55:13 von The Dark Freak »
Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Zitat von: The Dark Freak am 09.04.10, 13:53:38
mhmm naja, meine Variante schaut einfacher aus :-D
hm, ich find nein *g
musst ja bei meinem beispiel für jeden link jeweils nur eine zeile der art hier:
   "agb"   => "AGB"
hinzufügen. der rest läuft in der schleife dann ohne drauf achten zu müssen.

performance mässig ist die permanente ifschleife da der supergau (bei uns beiden) dazu hab ich aber JETZT auch grad keine bessere lösung.
ansonsten (das wollte ich grad eigentlich noch als edit unter meinen vorherigen beitrag tippeln xD) sieh meinen beitrag einfach als exemplarisches beispiel, dass wenn man nach rat fragt, oft auch viel mist von den "angeblichen helfern" getippelt wird :D:D *gg

(performance wird übrigens immer viel drüber diskutiert, ich garantiere dir aber dass sich das bei seiten unter 700-1.000 usern arg wenig bemerkbar macht) und beser geht halt dummerweise irgendwie immer. man muss nur lang genug auf den code starren :D *g
der code geht (bei php ) mit (lustigerweise( [ php ] blub [/ php ] (ohne die leerzeichen log.)
Moderator informieren  

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

mhmm ja stimmt bei genauerem hinsehen ist deien variante einfacher...

ich bleibe trotzdem bei meiner, denn es ist meine :P

ich bin vorgestern nacht wachgeworden und BAMM war da die idee. :-D Einfach so im halbschlaf im bett =]

ja also bei dieser webseite sind vll mal drei user online gleichzeitig. es handelt sich dabei nur um eine webpräsenz mit paar seiten about usw... 

von daher isset ja wurscht =]

sitzt du auch oft einfach vorm pc und guckst dir deinen code an wenn du nicht w eiter kommst?! :-D  das hatte ichg estern abend zwei std bei einem anderen projekt :-D

ahh das mit dem php code geht ja einfach. hätet ich auch mal drauf kommen können.

wieso packt man das nicht bei diesem form oben in die liste zwischen quote und link?! :-D  wär doch nur paar minuten programmier arbeit!! :-D Hallo Webmaster?!?

*grins*

danke für deine Hilfe strough

LG

Moderator informieren  

Seiten: 1 2 [Alle]
« Gratis Homepage - Aber wo?Aktuelles Datum + Uhrzeit in Fusszeile einfügen bei Easy Website Pro3 »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

The Dark Freak (422) ****

Datum: 06.04.10, 15:30:12

3837x gelesen, 15 Antworten.

Seiten: 1 2 [Alle]

0 und 2 Gäste betrachten dieses Thema.
Fremdwörter? Erklärungen im Lexikon!
Dead Link
Als Dead Link, also einen toten Link, bezeichnet man eine Verlinkung oder Verknüpfung, die ins Leere führt. Der Link bezieht sich auf einen Zielpunkt, der nicht...

Deep Link
Die Begriffe Surface Link und Deep Link (in Deutsch: Oberflächenverknüpfung und tiefe Verknüpfung) sind Begriffe aus dem Webmaster-Bereich und bezeichnen v...

Hyperlink
Ein Hyperlink, kurz Link, ist eine Verknüpfung oder ein elektronischer Verweis in Hypertext-Systemen, die es ermöglicht innerhalb eines Hypertextes einen Verwei...


Mehr zu Link Active

Der perfekte Link mit "Target"

Die Target Definition beschreibt das Ziel eines Links. Es wi...

Windows 7 2Windows 7: Verbindungsproblem mit TP-Link WA730RE und TP-Link TL-WN727N unter Wi

Hallo WLAN-Admins,seit einigen Wochen versuche ich mein Windows 7 Professional mit SP1 dazu zu beweg...


Ähnliche Fragen:
  • Soundkarte D-Link PCI Karte AirPlusG mit D-Link Router DI 624 u. DSL Modem 360T

    Hallo.Ich bin leider ein absoluter Newbie. Ich hatte vorher XP. Dort habe ich nach der Treiberinstal...

  • 3com_hardware cross-link gleich hard-link??

    hi mal wieder.frage:ist ein cross-link mit einem hardlink gleichzusetzen?falls nicht. bekommt ein cr...

  • Router D-Link WLAN-Router an D-Link DSL-Modem

    Hallo zusammen! Ich richte momentan bei einem Freund  ein! Da er schon ein DSL-Modem von D-Link...

  • Active x

    Hallo,seit kurzem erscheint auf verschiedenen Seiten immerdie Meldung:Active x Steuerlelement aus Si...

  • Active X

    Hallo, ich habe ausverstehen Active x ausgestellt, wie kann ich es wieder anstellen??Vielen DankMfG ...

  • Win XP: active x

    will auf eine seite aber da steht die seite kan net richtig angezeigt werden die active x irgendwas ...

  • Win XP: active x??

    hallo liebes forum!immer im internet (ie 6.0) erscheint beim öffnen einer neuen seite folgendes fen...

  • Active X

    Hallo!Also ich habs irgendwie geschafft das Active X zu zerstören bzw. zu löschen, auf jeden fall ...