如何将类添加到菜单项上当前单击的元素

Question

点击菜单项后，我试图删除上一个活动的类，并尝试将其添加到当前单击的元素中。

但是，请你告诉我在这种情况下我做错了什么

https://jsfiddle.net/x1f5n9qo/1/

    $(document).on('click', '.res', function(event)
    {

     $('.menu .res').removeClass('active');
        $(this).addClass('active');

var activeslidenumber = $(this).index();    

alert(activeslidenumber);

    });

Answer 1

这是一个可能的解决方案：

• 在你的锚元素中，添加一个名为“menu-item”的类
• 处理“menu-item”的click事件并在其上设置活动类
• 另外，为</ul>添加结束标记（在你的提琴代码中缺少）

Fiddler： https://jsfiddle.net/x1f5n9qo/6/

<强> HTML

     <div class="top-nav">
         <span class="menu"> <img src="images/icon.png" alt=""></span>
           <ul class="res">
              <li ><a class="menu-item active" href="#">One</a></li>
              <li><a class="menu-item" href="#">Two</a></li>
              <li><a class="menu-item" href="#">Three</a></li>
           </ul>           
     </div>

<强> JS

$(document).on('click', '.menu-item', function(event)
{    
    $('.res .menu-item').removeClass('active');
    $(this).addClass('active');  

});

这是另一个简单的解决方案：https://jsfiddle.net/x1f5n9qo/9/

Answer 2

试试这个

1. 点击菜单li的.res li。
2. 删除所有活动的。 $(".res li a").removeClass('active');

3. 然后添加当前有效$(this).addClass('active');

       $(document).on('click', '.res li', function(event)
       {            
   
       $(".res li a").removeClass('active');
       $(this).find('a').addClass('active')    
       var activeslidenumber = $(this).index();        
       alert(activeslidenumber);    
   
       });