代码之家 › 专栏 › 技术社区 › flash

如何在jquery/javascript中更改单击文本的颜色?

css html jquery javascript

flash · 技术社区 · 6 年前

我有一个 fiddle 我通过看到下面的截图复制了它。

小提琴的工作方式是,点击两个方块,另一个方块出现在底部。

我使用的jquery代码:

$("#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');
  }

});

问题陈述:

我要完成的是,点击上面屏幕截图中的绿色图像,文本颜色 (特许经营中心或基于云的移动) 在那两个方块里面应该变成白色。

我用了下面这句话来实现这个目标,但似乎不起作用。

$('#franchisehub p').css('color', 'white'); //添加行

1 回复 | 直到 6 年前

Prabin Sapal 6 年前

嘿,请检查我的密码 codepen 所以基本上,如果你把两个文本颜色都改成白色,那么它在选定的(绿色图像)中运行良好,但在另一个框中,背景是白色的,因此文本消失。所以我只将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');

  }
});