📜  如何在Bootstrap中更改活动nav-item的字体颜色?

📅  最后修改于: 2021-05-25 16:46:43             🧑  作者: Mango

您可以通过两种方式更改活动导航项的字体颜色。对于Bootstrap nav-active项目,默认字体颜色是活动nav-link的白色。第一种方法是使用CSS样式文件,并在单击时更改nav-item类。

第二种方法是使用jQuery .css()属性更改颜色,并使用jQuery将导航项的类状态更改为active。

方法1:提供覆盖的CSS样式:要更改字体的颜色,可以将覆盖的样式文件添加到HTML文件。该样式文件将用于更改所选导航项的字体颜色。选择导航项目后,此样式文件将添加到该特定导航项目中。

例子:



    
        
        
        
  
        
        
        
        
  
        Active Link using css style
        
    
  
    
        
  
      
    

输出:

在这里您可以观察到活动链接的颜色变为红色。

单击主页链接,其字体颜色更改为红色

单击GeeksForGeeks导航项目

方法2:使用jQuery更改active-nav链接的字体颜色:若要使用jQuery更改active-nav链接的字体颜色,我们需要将active类添加到该特定的nav-item,然后只需要应用.css(property,value)以更改活动导航项的字体颜色。

例子:



    
        
        
        
  
        
        
        
        
  
        Active Link font color using jqury
    
  
    
        
  
        
    

输出:

活动链接的颜色变为红色。

单击主页链接,其字体颜色更改为红色。在这里,颜色是使用jquery进行更改的。

单击GeeksForGeeks导航项目

注意:这两种方法的输出将相同。单击特定的导航项时,它将更改字体颜色。