Question

我想为当前单击的菜单项指定样式。为此我已经使用jQuery添加了一个类。我使用了以下代码。

jQuery(document).ready(function(){  
    jQuery('#submenu li a').click(function() {  
        jQuery(this).addClass('current_menu');
    });
});

但是当我点击另一个菜单项时，类current_menu不会被删除，样式保持不变。我想在点击另一个菜单项时删除该样式。请参阅http://itnews4india.com/。我该如何解决这个问题？

Answer 1

在您的代码中，您只需添加该类，但不要删除旧版本。

jQuery(document).ready(function(){  
    jQuery('#submenu li a').click(function() {  

        // remove the old menu items class
        jQuery('.current_menu').removeClass('current_menu');   

        // add the new one
        jQuery(this).addClass('current_menu');
    });
});

根据代码的其余部分，删除中的选择器可能必须调整为#submenu li a.current_menu'。

Answer 2

试试这个

jQuery(document).ready(function(){  
  jQuery('#submenu li a').click(function() {  
    jQuery("#submenu li a").removeClass('current_menu');
     jQuery(this).addClass('current_menu');
 });
});

Answer 3

这样做：

jQuery(document).ready(function(){  
    jQuery('#submenu li a').click(function() { 
        jQuery('a.current_menu').removeClass('current_menu'); 
        jQuery(this).addClass('current_menu');
    });
});

代码中的第三行将从链接中删除current_menu类，如果它们已经存在。

Answer 4

试试这个： -

jQuery(document).ready(function(){
   jQuery('#submenu li a').click(function() {
      // Remove class from all anchors inside list
      jQuery('#submenu li a').removeClass('current_menu');

      // Add class on selected/clicked anchor
      jQuery(this).addClass('current_menu');
   });
});

Answer 5

请试试这个：

$(document).ready(function(){  
        $('#submenu li a').click(function() {  
            $('#submenu li a').removeClass('current_menu');
            $(this).addClass('current_menu');
        });
    });

Answer 6

你需要在添加class之前删除它。

jQuery(document).ready(function(){  
    jQuery('#submenu li a').click(function() { 
        jQuery('a.current_menu').removeClass('current_menu'); 
        jQuery(this).addClass('current_menu');
    });
});

Answer 7

还有一个toggleClass函数：jQuery Api toggleClass

$('#submenu li a').click(function() {
    $(this).toggleClass('current_menu just_menu');
};

请注意，元素最初需要其中一个类！

Answer 8

color中的

样式.current_menu由#submenu li a

覆盖

在你的css中添加#submenu li a.current_menu {color:#fff;}

Answer 9

jQuery(document).ready(function() {  
    jQuery('#submenu li a').click(function() {
        jQuery('#submenu li').find('a').each(function(){
            jQuery(this).removeClass('current_menu');
        }) 
        jQuery(this).addClass('current_menu');
    });
});

jQuery中的addClass和removeClass

9 个答案: