javascript - 如何将列表项类别设置为事件导航栏

Question

我有以下导航栏代码。我尝试使用 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>

jQuery 代码:

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

Answer 1

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

$('.navbar-nav li a').click(function(e){
  e.preventDefault();
  $('.navbar-nav li').removeClass('active').addClass('inactive');
  $(this).parent('li').addClass('active');
})

.active {background:red;color:white;}
.active a{color:white}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

如果不起作用请告诉我。