如何在jquery/javascript中更改单击文本的颜色?
我看到了下面的截图,我复制了一个 小提琴的工作方式是,点击两个方块,另一个方块出现在底部 我使用的JQuery代码可以得到:如何在jquery/javascript中更改单击文本的颜色?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我看到了下面的截图,我复制了一个 小提琴的工作方式是,点击两个方块,另一个方块出现在底部 我使用的JQuery代码可以得到: $("#franchisehub").click(function() { if ($('.franchisehubtv').css('display') == "flex") { $('.franchisehubtv').css('display', 'none'); } else { $('#franchisehub').css('backg
$("#franchisehub").click(function() {
if ($('.franchisehubtv').css('display') == "flex") {
$('.franchisehubtv').css('display', 'none');
} else {
$('#franchisehub').css('background-color', 'green');
$('#franchisehub p').css('color', 'white'); // Added line
$('#cloudbasedmobile').css('background-color', 'white');
$('#businessanalytics').css('background-color', 'white');
$('#techsupport').css('background-color', 'white');
$('#ordermanagement').css('background-color', 'white');
$('#employeemanagement').css('background-color', 'white');
$('#whitelabel').css('background-color', 'white');
$('#emailmarketing').css('background-color', 'white');
$('#royaltycalculator').css('background-color', 'white');
$('#customizationtools').css('background-color', 'white');
$('#goalsetting').css('background-color', 'white');
$('#custominvoicing').css('background-color', 'white');
$('#leadtracking').css('background-color', 'white');
$('#brandcontrol').css('background-color', 'white');
$('.franchisehubtv').css('display', 'flex');
$('.cloudbasedtextipad').css('display', 'none');
$('.business-analytics').css('display', 'none');
$('.tech-support').css('display', 'none');
$('.order-management').css('display', 'none');
$('.employee-management').css('display', 'none');
$('.white-label').css('display', 'none');
$('.brand-control').css('display', 'none');
$('.lead-tracking').css('display', 'none');
$('.custom-invoicing').css('display', 'none');
$('.goal-setting').css('display', 'none');
$('.customization-tools').css('display', 'none');
$('.royalty-calculator').css('display', 'none');
$('.email-marketing').css('display', 'none');
}
});
问题陈述:
我想做的是,点击上面屏幕截图中的绿色图像,2个方框内的文本颜色特许经营中心或基于云的移动设备应变为白色
为了实现这一点,我使用了下面这行代码,但它似乎不起作用
$'p'.css'color','white';//添加行嘿,请检查my中的代码,因此基本上,如果您将两种文本颜色都更改为白色,则在selectedgreen图像中效果良好,但在另一个框中,背景为白色,因此文本消失。因此,我只将selectedgreen图像框的p文本更改为白色
$("#franchisehub").click(function() {
if ($('.franchisehubtv').css('display') == "flex") {
$('.franchisehubtv').css('display', 'none');
} else {
$('#franchisehub').css('background-color', 'green');
$('#franchisehub p').css('color', 'blue !important');
$('#franchisehub').find('p').css({color: '#fff'});
$('#cloudbasedmobile').find('p').css({color: '#222'});
$('#cloudbasedmobile').css('background-color', 'white');
$('#businessanalytics').css('background-color', 'white');
$('#techsupport').css('background-color', 'white');
$('#ordermanagement').css('background-color', 'white');
$('#employeemanagement').css('background-color', 'white');
$('#whitelabel').css('background-color', 'white');
$('#emailmarketing').css('background-color', 'white');
$('#royaltycalculator').css('background-color', 'white');
$('#customizationtools').css('background-color', 'white');
$('#goalsetting').css('background-color', 'white');
$('#custominvoicing').css('background-color', 'white');
$('#leadtracking').css('background-color', 'white');
$('#brandcontrol').css('background-color', 'white');
$('.franchisehubtv').css('display', 'flex');
$('.cloudbasedtextipad').css('display', 'none');
$('.business-analytics').css('display', 'none');
$('.tech-support').css('display', 'none');
$('.order-management').css('display', 'none');
$('.employee-management').css('display', 'none');
$('.white-label').css('display', 'none');
$('.brand-control').css('display', 'none');
$('.lead-tracking').css('display', 'none');
$('.custom-invoicing').css('display', 'none');
$('.goal-setting').css('display', 'none');
$('.customization-tools').css('display', 'none');
$('.royalty-calculator').css('display', 'none');
$('.email-marketing').css('display', 'none');
}
});
$("#cloudbasedmobile").click(function() {
if ($('.cloudbasedtextipad').css('display') == "flex") {
$('.cloudbasedtextipad').css('display', 'none');
} else {
$('#franchisehub').css('background-color', 'white');
$('#cloudbasedmobile').css('background-color', 'green');
$('#businessanalytics').css('background-color', 'white');
$('#techsupport').css('background-color', 'white');
$('#ordermanagement').css('background-color', 'white');
$('#employeemanagement').css('background-color', 'white');
$('#whitelabel').css('background-color', 'white');
$('#emailmarketing').css('background-color', 'white');
$('#royaltycalculator').css('background-color', 'white');
$('#customizationtools').css('background-color', 'white');
$('#goalsetting').css('background-color', 'white');
$('#custominvoicing').css('background-color', 'white');
$('#leadtracking').css('background-color', 'white');
$('#brandcontrol').css('background-color', 'white');
$('#franchisehub').find('p').css({color: '#222'});
$('#cloudbasedmobile').find('p').css({color: '#fff'});
$('.cloudbasedtextipad').css('display', 'flex');
$('.franchisehubtv').css('display', 'none');
$('.business-analytics').css('display', 'none');
$('.tech-support').css('display', 'none');
$('.order-management').css('display', 'none');
$('.employee-management').css('display', 'none');
$('.white-label').css('display', 'none');
$('.brand-control').css('display', 'none');
$('.lead-tracking').css('display', 'none');
$('.custom-invoicing').css('display', 'none');
$('.goal-setting').css('display', 'none');
$('.customization-tools').css('display', 'none');
$('.royalty-calculator').css('display', 'none');
$('.email-marketing').css('display', 'none');
}
});
我们也能看到你的html吗?我想知道在中是否有一个跨度或其他东西有自己的颜色。在你的js小提琴中有$'p'。css'color','blue!重要的",;只要换蓝色!重要的“白色”和它应该工作。如果没有,您使用的是哪种浏览器?这600行代码可以通过使用公共类和添加/删除选定类来减少到大约6行左右,只需更改卡的颜色和显示div。。。你应该切换一个类并管理CSS中的所有内容…删除我的答案,因为它是错误的。你所要做的就是把小提琴的颜色从蓝色改为白色,然后去掉琴键!这很重要,而且效果很好。谢谢你的回答。我还有一个类似的问题。如果我想在第二次点击任何产品项时隐藏倒三角形箭头,那么我需要在jquery代码中做哪些更改?检查JSFIDLE:,你的JS似乎太多了,你可以像我检查最后的电子邮件营销点击功能一样减少