Question

这是我的标记

<header id="header">
    <nav>
        <ul class="menu">
            <li id="homeSecLink" class="active"><a href="#Home" class="homeLink">Home</a></li>
            <li><a href="#Partners">Partners</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </nav>
</header>

在页面加载时，如果borderGap有homeSecLink，则我会尝试在标题上添加课程active，否则删除borderGap

此处addClass工作但removeClass无法正常工作

这就是我所做的：

$(document).ready(function() {
    if ($('#homeSecLink').hasClass("active")) {
        $('#header').addClass('borderGap');
    } else {
        $('#header').removeClass('borderGap');
    }
});

Answer 1

要removeClass工作，您需要删除active class

HTML

<header id="header">
    <nav>
        <ul class="menu">
            <li id="homeSecLink" class="active"><a href="#Home" class="homeLink">Home</a></li>
            <li><a href="#Partners">Partners</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </nav>
</header>
<a id="toggle">Toggle</a>

的JavaScript

$(document).ready(function() {
    $('#toggle').click(function() {
        if ($('#homeSecLink').hasClass("active")) {
            $('#header').addClass('borderGap');
            $('#homeSecLink').removeClass('active');
        } else {
            $('#header').removeClass('borderGap');
            $('#homeSecLink').addClass('active');
        }
    });
});

<强> Demo Link

如果hasclass addclass else removeclass不工作

1 个答案: