Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 14

Thema: Linkzustand mit JQquery beeinflussen?

  1. #1
    Neuer Benutzer
    Registriert seit
    11.09.2015
    Beiträge
    7

    Linkzustand mit JQquery beeinflussen?

    Hallo Zusammen,
    ich bin ein absoluter JQuery-Neuling und habe ein kleines Problem:Ich habe auf meiner Joomla-Homepage ein Hauptmenü und ein Splitmenü. In der Splitmenü-CSS habe ich über "active" den gerade aktiven Link anderst gestaltet und er sieht genauso aus wie ich es möchte. Nun würde ich es gerne so haben das immer der erste Link vom Splittmenü so aussieht wie der aktive Link außer ich klicke auf einen anderen Menüpunkt. Wenn ich es über "first-child" deklariere bleibt der erste Link die ganze Zeit so und zusätzlich nimmt auch noch der jeweils angeklickte Link dieses Aussehen an. Meine Frage: Läßt sich dies über JQuery lösen? Und wenn ja wie?
    Vielen Dank schon mal im Voraus
    Gruß Tom

  2. #2
    Erfahrener Benutzer
    Registriert seit
    09.12.2014
    Beiträge
    559
    hm also rein über css würde mir spontan nix einfallen ... ich bin da aber auch kein wirklicher meister drin.

    bei jquery würde ich es so machen ...

    das first child css wieder weg nehmen und wenn keine class active vorhanden ist das erste element einfach auf active setzten.

  3. #3
    Neuer Benutzer
    Registriert seit
    11.09.2015
    Beiträge
    7
    Hallo Troll, danke erstmal für deine Antwort.
    First-Child habe ich ersatzlos gestrichen und auf active kann ich bei Joomla leider nur ein Link pro Menü setzen.
    Dies funktioniert bis dahin auch so. Ich weiß jetzt solangsam keine Css-Anweisung mehr, welche ich noch nicht ausprobiert habe.

  4. #4
    Erfahrener Benutzer
    Registriert seit
    09.12.2014
    Beiträge
    559
    ne ich meine dann mit javascript und JQ den gewünschten ersten link auf active setzten ....

    schau dir mal in der doku .find an

    irgendwie so in der art müsste das grob aussehen

    if($('#menue').find('.active').length == 0){
    //erste element suchen und mit addclass('active') die css klasse setzten
    }

  5. #5
    Erfahrener Benutzer
    Registriert seit
    29.10.2014
    Beiträge
    534
    Hast du vielleicht ein Beispiel wie dein Menu aufgebaut ist? Grundsätzlich lässt sich das in jQuery gut lösen. Dein First-Child, das du benutzt hat ist immer der erste Link-Eintrag. Dies kann man aber wie Troll geschrieben hat ändern. Aber im Moment fischen wir im trüben. Vielleicht einfach mal den Quellcode deines Menus hier posten, damit wir sehen wo die Reise hingeht.
    i++; // zaehler i um 1 erhoehen

  6. #6
    Neuer Benutzer
    Registriert seit
    11.09.2015
    Beiträge
    7
    Ja gerne. Hier der Code fürs Menü:
    /* CSS Document */

    @import url("../webfonts/Raleway_Regular/stylesheet.css");

    @import url("../webfonts/Raleway_Light/stylesheet.css");


    @import url("../webfonts/Marcellus_Regular/stylesheet.css");

    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    #cssmenu {

    width: 180px;
    z-index: 10;
    }
    #cssmenu ul {
    border: 1px solid #adad1d;
    border-radius: 5px;

    background: #bfbf18;
    background: -moz-linear-gradient(top, rgba(191,191,24,0.03) , #ADAD1D 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,191,24,0.03) , #ADAD1D 100%));
    background: -webkit-linear-gradient(top, rgba(191,191,24,0.03), #ADAD1D 100%);
    background: -o-linear-gradient(top, rgba(191,191,24,0.03), #ADAD1D 100%);
    background: -ms-linear-gradient(top,rgba(191,191,24,0.03), #ADAD1D 100%);
    background: linear-gradient(top, rgba(191,191,24,0.03), #ADAD1D 100%);
    }
    #cssmenu ul li {
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    }
    #cssmenu ul li.active {
    border-bottom: 0;
    }
    #cssmenu ul li:last-child {
    border-bottom: 0;
    }
    #cssmenu ul li a {
    display: block;
    padding: 14px 12px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #444444;
    }
    #cssmenu ul li a:hover{
    color:#fff;
    }
    #cssmenu ul li.active {
    left: -8px;
    width: 194px;
    padding: 2px;
    background: #bfbf18;
    background: -moz-linear-gradient(top, #BFBF18 0%, #ADAD1D 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#BFBF18 0%, #ADAD1D 100%));
    background: -webkit-linear-gradient(top, #BFBF18 0%, #ADAD1D 100%);
    background: -o-linear-gradient(top, #BFBF18 0%, #ADAD1D 100%);
    background: -ms-linear-gradient(top,#BFBF18 0%, #ADAD1D 100%);
    background: linear-gradient(top, #BFBF18 0%, #ADAD1D 100%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    }
    #cssmenu ul li.active > a {
    padding: 12px 12px 12px 18px;
    border-right: 1px dashed #747400;
    border-top: 1px dashed #747400;
    border-bottom: 1px dashed #747400;
    color: #ffffff;
    text-shadow: 0 1px 1px #747400;
    }
    #cssmenu ul li.active:after {
    position: absolute;
    left: -16px;
    top: 7px;
    width: 31.526911934581186px;
    height: 31.526911934581186px;
    background: #ce4c4a;
    background: -moz-linear-gradient(-45deg, #c43735, #d56462);
    background: #bfbf18;
    background: -moz-linear-gradient(-45deg, #BFBF18 0%, #ADAD1D 100%);
    background: -webkit-gradient(-45deg, linear, left top, left bottom, color-stop(0%,#BFBF18 0%, #ADAD1D 100%));
    background: -webkit-linear-gradient(-45deg, top, #BFBF18 0%, #ADAD1D 100%);
    background: -o-linear-gradient(-45deg, top, #BFBF18 0%, #ADAD1D 100%);
    background: -ms-linear-gradient(-45deg, top,#BFBF18 0%, #ADAD1D 100%);
    background: linear-gradient(-45deg, top, #BFBF18 0%, #ADAD1D 100%);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    }
    #cssmenu ul li.active:before {
    position: absolute;
    left: -12px;
    top: 9px;
    z-index: 10;
    width: 28.526911934581186px;
    height: 28.526911934581186px;
    border-left: 1px dashed #747400;
    border-bottom: 1px dashed #747400;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    }
    #cssmenu ul li.active :after {
    position: absolute;
    bottom: -7px;
    right: -10px;
    z-index: -1;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 8px solid transparent;
    border-left: 8px solid #747400;
    content: "";
    }

  7. #7
    Erfahrener Benutzer
    Registriert seit
    29.10.2014
    Beiträge
    534
    Ich fürchte des CSS alleine reicht nicht. Ich bekomme kein plausibles HTML daraus zusammen.

    Hier mein Versuch.
    i++; // zaehler i um 1 erhoehen

  8. #8
    Neuer Benutzer
    Registriert seit
    11.09.2015
    Beiträge
    7
    Hi freak4fun,
    hier der Link zur zukünftigen Webseite: www.tkmedien.com

    Ich fürchte ich habe den Code aus einem früheren Stadium des Menues geschickt.
    Auf ein neues:

    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    #cssmenu {
    margin-top:15px;
    margin-right:15px;
    width: 180px;
    z-index: 10;
    }
    #cssmenu ul {
    border: 1px solid #adad1d;
    border-radius: 5px;

    background: #bfbf18;
    background: -moz-linear-gradient(top, rgba(191,191,24,0.03) , #ADAD1D 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,191,24,0.03) , #ADAD1D 100%));
    background: -webkit-linear-gradient(top, rgba(191,191,24,0.03), #ADAD1D 100%);
    background: -o-linear-gradient(top, rgba(191,191,24,0.03), #ADAD1D 100%);
    background: -ms-linear-gradient(top,rgba(191,191,24,0.03), #ADAD1D 100%);
    background: linear-gradient(top, rgba(191,191,24,0.03), #ADAD1D 100%);
    }
    #cssmenu ul li {
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.6);
    }
    #cssmenu ul li.active {
    border-bottom: 0;
    }
    #cssmenu ul li:last-child {
    border-bottom: 0;
    }
    #cssmenu ul li a {
    display: block;
    padding: 14px 12px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #444444;
    }
    #cssmenu ul li a:hover{
    color:#fff;
    }
    #cssmenu ul li.active {
    left: -8px;
    width: 194px;
    padding: 2px;
    background: #bfbf18;
    background: -moz-linear-gradient(top, #BFBF18 0%, #ADAD1D 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#BFBF18 0%, #ADAD1D 100%));
    background: -webkit-linear-gradient(top, #BFBF18 0%, #ADAD1D 100%);
    background: -o-linear-gradient(top, #BFBF18 0%, #ADAD1D 100%);
    background: -ms-linear-gradient(top,#BFBF18 0%, #ADAD1D 100%);
    background: linear-gradient(top, #BFBF18 0%, #ADAD1D 100%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    }
    #cssmenu ul li.active > a {
    padding: 12px 12px 12px 18px;
    border-left: 1px dashed #747400;
    border-top: 1px dashed #747400;
    border-bottom: 1px dashed #747400;
    color: #ffffff;
    text-shadow: 0 1px 1px #747400;
    }
    #cssmenu ul li.active:after {
    position: absolute;
    left: -16px;
    top: 7px;
    width: 31.526911934581186px;
    height: 31.526911934581186px;
    background: #ce4c4a;
    background: -moz-linear-gradient(-45deg, #c43735, #d56462);
    background: #bfbf18;
    background: -moz-linear-gradient(-45deg, #BFBF18 0%, #ADAD1D 100%);
    background: -webkit-gradient(-45deg, linear, left top, left bottom, color-stop(0%,#BFBF18 0%, #ADAD1D 100%));
    background: -webkit-linear-gradient(-45deg, top, #BFBF18 0%, #ADAD1D 100%);
    background: -o-linear-gradient(-45deg, top, #BFBF18 0%, #ADAD1D 100%);
    background: -ms-linear-gradient(-45deg, top,#BFBF18 0%, #ADAD1D 100%);
    background: linear-gradient(-45deg, top, #BFBF18 0%, #ADAD1D 100%);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    }
    #cssmenu ul li.active:before {
    position: absolute;
    left: -12px;
    top: 9px;
    z-index: 10;
    width: 28.526911934581186px;
    height: 28.526911934581186px;
    border-left: 1px dashed #747400;
    border-bottom: 1px dashed #747400;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    }
    #cssmenu ul li.active a:after {
    position: absolute;
    bottom: -7px;
    right: -10px;
    z-index: -1;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 8px solid transparent;
    border-left: 8px solid #747400;
    content: "";
    }
    #cssmenu ul ul li a {
    color: #999;
    border-left:1px solid #bfbf18;
    border-right:1px solid #bfbf18;
    border-bottom:1px solid #bfbf18;

    background: rgba(191,191,24,0.03);
    }

    Folgendes habe ich schon ohne Erfolg probiert. Ich steh grad auf Schlauch.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $("#tk-menu li a").click(function(){
    $("#cssmenu li a:first").addClass("active");
    });
    });
    </script>
    Geändert von tomcat66 (12.09.2015 um 22:29 Uhr)

  9. #9
    Erfahrener Benutzer
    Registriert seit
    09.12.2014
    Beiträge
    559
    der link zur seite hät uns gereicht

    aber ich hatte die lösung oben ja schon fast geschrieben

    Code:
    //noch nix aktiv
    if($('#cssmenu').find('.active').length == 0){
       $('#cssmenu').find('ul').children().first().addClass('active');
    }

    das ganze kannst du anstelle dem hier machen (immerhin hast du es ja schon versucht )

    Code:
        $("#tk-menu li a").click(function(){
            $("#cssmenu li a:first").addClass(".active");
        });

  10. #10
    Neuer Benutzer
    Registriert seit
    11.09.2015
    Beiträge
    7
    Super, es funktioniert einwandfrei. Danke Euch beiden und vor allem dir Troll.
    LG Tom

Seite 1 von 2 12 LetzteLetzte

Lesezeichen

Lesezeichen

Berechtigungen

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