Javascript 如何将列表项类设置为活动导航栏

我有下面的导航条形码。我试图使用jQuery设置一类列表项，但这不起作用。我做错了什么？请帮忙！以下是我的html代码和jQuery代码：

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
            <li id="home" class="inactive">
                <a aria-expanded="false" role="button" href="Home.html"> Home</a>
            </li>
            <li id="add" class="inactive">
                <a aria-expanded="false" role="button" href="add.php">Add</a>
            </li>
            <li id="search" class="inactive">
                <a aria-expanded="false" role="button" href="search.php">Search</a>
            </li>
            <li id="admin" class="inactive">
                <a aria-expanded="false" role="button" href="setting.php">Setting</a>
            </li>
        </ul>
    </div>
</nav>

<script>
$(document).ready(function(){
    $('#add').removeClass('inactive');
    $('#add').addClass('active');
});
</script>

jQuery代码：

<nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
            <li id="home" class="inactive">
                <a aria-expanded="false" role="button" href="Home.html"> Home</a>
            </li>
            <li id="add" class="inactive">
                <a aria-expanded="false" role="button" href="add.php">Add</a>
            </li>
            <li id="search" class="inactive">
                <a aria-expanded="false" role="button" href="search.php">Search</a>
            </li>
            <li id="admin" class="inactive">
                <a aria-expanded="false" role="button" href="setting.php">Setting</a>
            </li>
        </ul>
    </div>
</nav>

<script>
$(document).ready(function(){
    $('#add').removeClass('inactive');
    $('#add').addClass('active');
});
</script>

$（文档）.ready（函数（）{
$（'#add'）.removeClass（'inactive'）；
$（'#add'）.addClass（'active'）；
});

请找到下面提到的解决方案

$（'.navbar nav li a'）。单击（函数（e）{
e、 预防默认值（）；
$（'.navbar nav li'）.removeClass（'active'）.addClass（'inactive'）；
$（this.parent（'li'）.addClass（'active'）；
})

.active{背景：红色；颜色：白色；}
.active a{color:white}

您将jQuery代码放在哪里？是否有任何错误？您的代码没有问题，只是有多个ID为add的元素。谢谢，我尝试您的代码对我不起作用。我不能使用您的样式，因为启动css代码中已经设置了“活动”和“非活动”的样式。@CK8:这只是为了演示。您可以添加您的css和类，它将根据您的要求工作。你只要删除我的css，一切都会好起来的。非常感谢你的帮助。我发现了我的问题。在我的代码之前，我没有引用jQuery代码。在我将jQuery代码移到页面底部后，它就工作了。回答得不错。这对我有用！