CSS hintergrund Farbe und text ändern mit jquery/javascript

Schwierigkeiten mit einem Stück code zu ändern die hintergrund-Farbe und text-Farbe, wenn ein link angeklickt wird.....

<div id="main_nav">
    <ul class="navigation">
        <li class="tab1"><a href="javascript:void(0);">My Account</a></li>
        <li class="tab1"><a href="javascript:void(0);">Available Times</a></li>
        <li class="tab1"><a href="javascript:void(0);">Completed Jobs</a></li>
        <li class="tab1"><a href="javascript:void(0);">New Jobs [<span class="menu_count2"></span>]</a></li>
        <li class="tab1"><a href="javascript:void(0);">Todays Jobs [<span class="menu_count"></span>]</a></li>
    </ul>
</div>

Dies ist die jquery....

$(document).on('click', '.tab1', function(){
    $('.tab1').css({'background-color' : '#5B1762'});
    $('.tab1 a').css({'color' : '#fff'});
    $(this, '.tab1').css({'background-color': '#ccc'});
    $(this, '.tab1 a').css({'color': 'red'});
});

Dadurch ändert sich die Hintergrundfarbe, aber der text bleibt weiß, als in der css-Datei.

  • Was genau ist das problem, was passiert und was erwartest du, was passiert ?
InformationsquelleAutor Sideshow | 2012-11-12
  1. 8

    Codierung $(context, selector) statt der $(selector, context) ändern:

    $(this, '.tab1').css({'background-color': '#ccc'});
$(this, '.tab1 a').css({'color': 'red'});

    Zu:

    $(this).css({'background-color': '#ccc'});
$('a', this).css({'color': 'red'});
    • Perfekt - vielen Dank - wird die Zecke so schnell wie es lässt mich 🙂
    InformationsquelleAutor undefined
  2. 2

    Getan werden könnte, auch so:

    $('.tab1').click( function(){
    $('.tab1').css({'background-color' : '#5B1762'}).find('a').css({'color' : '#fff'});
    $(this).css({'background-color': '#ccc'}).find('a').css({'color': 'red'});
});
    InformationsquelleAutor Reflective
Schreibe einen Kommentar