菜单上滚动的活动类-如何添加字体颜色和字体大小变化的活动类

Menu active class on scrolling - How to add font color and font size change on active class?

本文关键字：活动 字体 变化 颜色 添加 滚动 菜单 何添加      更新时间：2023-09-26

我在滚动时为菜单添加了活动状态。

HTML: 

<li><a href="#subsection-schedule"><span class="blueNavTitle">CONTENT</span></a>
    <ul>
        <li><a id="nav_section2" href="#A" class="active">A</a></li>
        <li><a id="nav_section3" href="#B">Upload</a></li>
        <li><a id="nav_section4" href="#C">Add</a></li>
        <li><a id="nav_section5" href="#D">Add MORE</a></li>
        <li><a id="nav_section6" href="#E">Prepare</a></li>
        <li><a id="nav_section7" href="#F">Present</a></li>
        <li><a id="nav_section8" href="#G">Upload MORE/a></li>
        <li><a id="nav_section9" href="#K">Increase</a></li>
    </ul>
</li>
JavaScript: 

<script type="text/javascript">
$(function(){
var menusections = {},
    _height  = $(window).height(),
    i        = 0;
// Grab positions of our sections 
$('.menusection').each(function(){
    menusections[this.name] = $(this).offset().top;
});
$(document).scroll(function(){
    var $this = $(this),
        pos   = $this.scrollTop();
    // Look in the sections object and see if any section is viewable on the screen. 
    // If two are viewable, the lower one will be the active one.     
    for(i in menusections){
        if(menusections[i] > pos && menusections[i] < pos + _height){
            $('a').removeClass('active');
            $('#nav_' + i).addClass('active');
        } 
    }
});
}); 
 </script>

active的CSS为:

.active {
background-color: rgba(0, 0, 0, 0.1);
 }

我的问题是，如果我想改变font-size和font-color除了背景颜色的变化?我试着添加字体大小和其他一些，但不工作。

添加到你的css类中:

.active {
background-color: rgba(0, 0, 0, 0.1);
font-size:14pt !important; /*whatever size you want*/
color:blue !important; /*(font color)*/
}
相关文章：