Jquery 为元素添加或删除活动类

我想在选择菜单选项时添加或删除css类，但我有一个问题，因此我的html：

 <ul class="nav" id="main-menu">
            <li>
                <a class="active" href="1.html"><i class="fa fa-dashboard fa-3x"></i>Home</a>
            </li>
            <li>
                <a href="2.html"><i class="fa fa-desktop fa-3x"></i>Add</a>
            </li>
            <li>
                <a href="3.html"><i class="fa fa-qrcode fa-3x"></i>View</a>
            </li>
</ul>

我的jquery：

$('nav li a').on('click', function() {  
$('nav li a.active').removeClass('active');
$(this).addClass('active');    
});

---

请帮帮我，伙计们使用

.nav

而不是

nav

来引用UL元素

$('.nav li a')
$('.nav li a.active')

此处可测试：

因为“nav”是一个类，所以必须在它前面添加一个点

您的jQuery应该是：

$('.nav li a').on('click', function() {  
$('.nav li a.active').removeClass('active');
$(this).addClass('active');    
});

---

这是一个什么问题？当我单击“活动”类时，不会删除..状态保持不变。不确定问题是什么-能否提供JSFIDLE？是否使用

$（document）.ready（函数（）{/*your code here*/}）

，或者将您的JavaScript/jQuery放在一个允许在JavaScript执行之前创建DOM的位置？我添加了这个选项，但没有结果，您需要进一步解释什么不起作用，因为这两个答案都起作用。

$('.nav li a').on('click', function() {  
$('.nav li a.active').removeClass('active');
$(this).addClass('active');    
});