Question

在点击链接时，无法使用一段代码更改背景颜色和文字颜色.....

<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>

这是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'});
});

这会更改背景颜色，但文本会像css文件一样保持白色。

Answer 1

您正在编码$(context, selector)而不是$(selector, context)，请更改：

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

要：

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

Answer 2

也可以这样做：

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

CSS背景颜色和文本随jquery / javascript改变

2 个答案: