Ankündigung

Einklappen
Keine Ankündigung bisher.

Fontawesome auf aktiven Link setzen aber verschieden

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fontawesome auf aktiven Link setzen aber verschieden

    Hallo!!

    Ich versuche gerade im Netz was zu finden wie man ein aktiven link mit den Webicons Font Awesome in einer CSS Anweisung definieren kann.
    Ich stelle mir das ganze so vor das der Link angeklickt wird und das Icon erscheint. Bei nicht aktiven Link sollte der Icon nicht mehr sichtbar sein.

    Hat da jemand eine Idee. Ich suchte auch schon auf stackoverflow.com aber bin dort leider nicht fündig geworden vielleicht hat ja einer eine Idee hier.

    Danke im Vorraus, sollte ich falsch sein in der Kategorie bitte ich um Verschiebung in die richtige Kategorie

  • #2
    Sieht so aus, als wolltest Du den Link nicht in üblicherweise als "Verbindung" zu einer anderen Seite verwenden, richtig?! Wahrscheinlich wegen der CSS Pseudoklassen?! Aber wenn der Link nirgendwo hinführen soll, kannst Du evtl. auch über die Pseudoklasse :focus dasselbe erreichen. Also z. B, mit einem Button Input. Sowas in der Art könnte schon das sein, was Du suchst:

    HTML
    Code:
    <input type="button" value="Laber"><p>
    Hallo There!
    </p>
    CSS
    Code:
    p {
     display:none;
    }
    input:focus + p {
      color:red;
      display:block;
    }
    Das müsste mit einem Font Awesome Icon auch gehen.
    [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

    Kommentar


    • #3
      [MOD: verschoben von PHP-Einsteiger]
      Competence-Center -> Enjoy the Informatrix
      PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

      Kommentar


      • #4
        Ein ganz normales Menu?

        Du kannst eine CSS Klasse erstellen "active" und dieser ein Icon geben.

        mit jquery dann wechseln, nicht getestet:

        Code:
        $(document).ready(function() {
          $('li a').on('click', function() {
            $('li a').removeClass('active');
            $(this).addClass('active');
          });
        });

        Kommentar


        • #5
          Auf der Webseite warst du auch schon und hast dort die Anleitung befolgt?

          Kommentar


          • #6
            @protestix
            Die Anleitung kenne ich schon.
            Vieleicht habe ich es auch verkehrt beschrieben was ich suchte.
            Der Icon von fontawesome sollte nur anzeigen wenn der Link aktiv geklickt wurde . Ist er nicht aktiv so sollte das Icon nicht mehr erscheinen.

            Per javascript ist das keine Lösung. Hat da noch einer eine Idee??

            Kommentar


            • #7
              Ich würde es so machen.
              Code:
              <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
              <style>
                #icon{
                display:none;
              } 
              a:active > #icon{
                display:block;
              } 
              </style>
              <a href="#">Dein Link<i id="icon" class="fa fa-address-book" aria-hidden="true"></i></a>
              In den Fall ist zwar active nur solange du die Mouse gedrückt hälst aber den rest bekommst du wohl selber hin.
              Zb :focus, was hier schon gesagt wurde
              Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
              Erreichbar in mein Javascript-Forum und in Facebook-Chat

              Kommentar


              • #8
                Fettschrift macht die unpräzise Anfrage auch nicht besser.
                Zitat von matzenoop Beitrag anzeigen
                Der Icon von fontawesome sollte nur anzeigen wenn der Link aktiv geklickt wurde . Ist er nicht aktiv so sollte das Icon nicht mehr erscheinen.
                Wenn der link geklickt wurde verschwindet in der Regel die Seite und eine neue Seite erscheint. Was willst Du nun, soll das Icon bei mousedown erscheinen oder dann wenn der link geklickt wurde (was natürlich keinen Sinn macht).


                Kommentar


                • #9
                  Ich glaube, ein Codeausschnitt kann hier nicht schaden.

                  Zudem must DU präziser werden bzgl. Link und "aktiv".

                  Ich vermute ja mit aktiv ist a:hover und a:focus gemeint.

                  Evtl. willst DU aber auch, dass nachdem ein Link innerhalb eines immer sichtbaren Menüs gegklickt wurde, der Link durch das Fontawesome Symbol hervorgehoben wird, damit der User besser weiß, auf welcher Seite er gerade ist?!
                  [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

                  Kommentar

                  Lädt...
                  X