Anwenden einer anderen CSS-Klasse beim Klicken mit jQuery

Ich richte gerade eine WordPress-Site ein und verwende diese Vorlage von ThemeForest, und hier ist die Live Vorschau woran ich gerade arbeite (was jetzt funktionieren sollte – bitte lassen Sie mich wissen, wenn es nicht funktioniert).

Ich habe das CSS so konfiguriert, dass der linke Rand beim Bewegen die hellgraue Farbe hat. Wenn dann auf den Link geklickt wurde, wäre der linke Rand dann die von mir gewählte blaue Farbe.

Wie unten gezeigt, liegt das Hauptproblem, das ich mit der Navigation habe, im CSS. Auf den Portfolio-Link (Portfolio-Abschnitt im Bild) wird weiterhin die ausgewählte Klasse angewendet, zusammen mit dem internen ungeordneten Listenelement. Ich möchte, dass es wie der Blog-Bereich im Bild aussieht, wo der Blog-Link nicht mehr auf das ausgewählte Klassenelement zutrifft.

Ich habe den Ersteller der Vorlage gefragt, warum dies geschieht; Seine Antwort war, dass unten ein weiterer Link vorhanden sein muss, der das Titelattribut „allportfolio“ enthält, damit es ordnungsgemäß funktioniert. Ich habe versucht, dieses Attribut zum Hauptportfolio-Link hinzuzufügen, habe dann aber die Liste vollständig geschlossen.

Wenn das Menü erstellt wird, erstellt der Browser die Portfolio-Auswahl auf folgende Weise in HTML:

<ul class="main-menu" id="menu-main-menu">
    <li class="parent selected" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

Ich habe versucht, etwas Ähnliches wie diese Antwort zu geben, aber es hat nicht funktioniert, da es anscheinend nichts im Listenelement enthalten war. Der folgende jQuery-Code unten ist mein Versuch:

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu ul.submenu li p a').click(
        function(){
            $('ul#menu-main-menu li').removeClass('parent selected');
            $(this).addClass('parent menu-item');
    });

Ich fühle mich festgefahren, weil ich nicht herausfinden kann, wie der HTML-Code wie unten aussehen soll (nehmen Sie die CSS-Klasse „ausgewählt“ heraus und fügen Sie die CSS-Klasse „Menüpunkt“ hinzu):

<ul class="main-menu" id="menu-main-menu">
    <li class="parent menu-item" id="menu-item-1172">
       <p><a href="http://localhost/portfolio/" style="color: rgb(57, 57, 57);">Portfolio</a></p>
    <div>
       <ul class="sub-menu">
           <li class="menu-item" id="menu-item-1158"><p><a data-filter="website-design" data-category="true" href="#">Website Design</a></p></li>
           <li class="menu-item" id="menu-item-1157"><p><a data-filter="print" data-category="true" href="#">Print</a></p></li>
           <li class="menu-item selected" id="menu-item-1156"><p><a data-filter="motion" data-category="true" href="#">Motion</a></p></li>
           <li class="menu-item" id="menu-item-1155"><p><a data-filter="identity" data-category="true" href="#">Identity</a></p></li>
           <li class="menu-item" id="menu-item-1167"><p><a data-filter="logos" data-category="true" href="#">Logos</a></p></li>
      </ul>
   </div>
   </li>

UPDATE: Die @limelights-Antwort schien zu funktionieren, aber ich fand einige jQuery, die die Link-Hover-Effekte auf der Website beeinflussten, und war mir nicht sicher, ob dies der Grund dafür war, dass die Antwort auf den Code in der scripts.js-Datei von nicht funktionierte das WordPress-Template

/* Links roll over effect */
    $('a').each(function(){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
            $(this).hoverFadeColor();
    })

Außerdem bin ich dem, was ich erreichen möchte, sehr nahe, indem ich diesen Code verwende, um die internen Links endlich offen zu halten:

/*Portfolio links remove selected CSS setting*/
    $('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').click(
        function(){
            $('ul#menu-main-menu > li').removeClass('selected');
            $('ul#menu-main-menu > li').css({'color' : '#222'}).addClass('menu-item');
            $('ul#menu-main-menu li div:first').show();
        });

Aber was es immer noch tut (wie unten zu sehen) ist, dass der Text immer noch wie der ausgewählte Text ausgewählt ist.

Jede Hilfe wird sehr geschätzt!

Führt dies zu dem erwarteten Verhalten?

  $('a').each(function(e){
        if(!$(this).data('filter') && !$(this).parent().parent().parent().hasClass('pagination'))
        $(this).hoverFadeColor();
        e.preventDefault();
   })

Das Hinzufügen von e.preventDefault() sollte das Problem lösen.

AKTUALISIERT AM 10.12.2012:

Versuchen Sie, Ihre Klickfunktion wie folgt zu aktualisieren:

$('ul#menu-main-menu li div ul.sub-menu:first li.menu-item p a').on("click",function(){
    var linkClicked = $(this);
    $("#menu-main-menu li").each(function(){
        $(this).removeClass("selected").css({'color' : '#888'}).addClass('menu-item');
        $(this).first("div").show();
    });
    linkClicked.css({'color' : '#222'})
});

Ich habe kleine Änderungen in Ihrem CSS vorgenommen und einige Jquery-Funktionen wie folgt zu Ihrer HTML-Seite hinzugefügt:

CSS-Änderung:

Suchen Sie in Ihrer custom.css die Zeilennummer 67 und ersetzen Sie die Codierung wie folgt:

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
   background:#FFF;
   border-left:6px solid #F0F0F0;
}

Diese oben ersetzen in

/*Turns link background white and removes border on the left at hover*/
.Light #menu ul.main-menu > li:hover > p > a {
   background:#FFF;
   /*border-left:6px solid #F0F0F0;*/
}

Hinzufügen der Jquery-Funktion an einigen Stellen Ihrer Design-Header- oder -Footer-Datei wie folgt,

<script type="text/javascript">
$(document).ready(function() {
$("#menu-main-menu li:first").addClass("selected");
$("#menu-main-menu li p a").css("border-left","none");
$("#menu-main-menu li p a").hover(function(){$(this).css("border-left","6px solid #F0F0F0");});
$("#menu-main-menu li").click(function() {
  $(this).addClass("selected");
});
});
</script>

Diese oben genannten Änderungen funktionieren für mich. Um es in Aktion zu sehen: http://jsbin.com/ehagal/1

Ich denke, das kann dir helfen, dein Problem zu lösen.

Wenn ich Sie richtig verstehe, sollte Ihnen das helfen, wenn Sie in der Lage sind, irgendeine Art von Skript einzufügen. 🙂

$('ul#menu-main-menu li div ul.sub-menu li.menu-item p a').click(function(event){
    $('ul#menu-main-menu > li').removeClass('selected');
    alert($('ul#menu-main-menu > li').attr('class'));
    $('ul#menu-main-menu li').addClass('menu-item');
    alert($('ul#menu-main-menu > li').attr('class'));
    event.preventDefault();
});

Ich hoffe, das ist es, was Sie suchen! 🙂

Sie können es ausprobieren hier auf TINker.io

Ich habe zwei Warnungen eingefügt, damit Sie sehen können, dass die Klasse tatsächlich entfernt und dann eine andere Klasse hinzugefügt wird. Sie müssen natürlich angeben, wie die neue Klasse im CSS aussieht.

Das Hinzufügen von jQuery sollte Ihr Problem lösen, wenn Sie eine Kopie dessen haben, was ich in der Live-Vorschau ohne eine nennenswerte Anpassung sehe.

$("#menu-main-menu li").click(function(){ 
    $("#menu-main-menu li").removeClass("selected"); 
});