[英]CSS background color and text change with jquery/javascript
Having trouble with a piece of code to change both the background color and text color when a link is clicked..... 单击一个链接时,有一段代码无法更改背景颜色和文本颜色.....
<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>
This is the jquery.... 这是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'});
});
This changes the background color but the text remains white as in the css file. 这会更改背景颜色,但文本仍然是白色,如css文件中所示。
You are coding $(context, selector)
instead of the $(selector, context)
, change: 您正在编码
$(context, selector)
而不是$(selector, context)
,更改:
$(this, '.tab1').css({'background-color': '#ccc'});
$(this, '.tab1 a').css({'color': 'red'});
To: 至:
$(this).css({'background-color': '#ccc'});
$('a', this).css({'color': 'red'});
Could be done that way too: 也可以这样做:
$('.tab1').click( function(){
$('.tab1').css({'background-color' : '#5B1762'}).find('a').css({'color' : '#fff'});
$(this).css({'background-color': '#ccc'}).find('a').css({'color': 'red'});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.