CSS：如何在导航中更改li的CSS类

Question

我需要创建一个导航菜单。当我选择其中一个菜单时，我需要将css类更改为对应的li激活。为此，我使用了如下所示的代码

  <ul class="smallmenuContainer">
    <li><a class="active" href="index.html#red">Home</a></li>
    <li><a href="index.html#green">About us</a></li>
    <li><a href="index.html#blue">Works</a></li>
    <li><a href="index.html#yellow">Contact us</a></li>
  </ul>

   <div class="introContainer">
    <a name="red">red</a>
</div>
<div class="aboutContainer">
    <a name="green">green</a>
</div>
<div class="galleryContainer">
    <a name="blue">blue</a>
</div>
<div class="contactContainer">
</div>
<a name="yellow">yellow</a>

您能帮我更改相应的CSS类吗？

Answer 1

采用

$(function(){
    $('.smallmenuContainer a').click(function(){
         $('.smallmenuContainer a').removeClass('active');
         $(this).addClass('active');
   });
});

它会从所有其他主动删除类a标签，并添加类电流a

Answer 2

您可以像这样使用jquery的removeClass和AddClass

$('.smallmenuContainer li>a').on('click',function(){
$('.smallmenuContainer li>a').removeClass('active');
$(this).addClass('active');
return false;
});

Answer 3

我不太了解您的意思，但是我认为这可以帮助您：

$('.smallmenuContainer').click(function(
//you should put the class you want to assigne here instead of cssclass
$('#smallmenuContainer li>a').removeClass('cssclass');
$(this).addClass('cssclass');
));

Answer 4

$( ".smallmenuContainer a" ).click(function() {
  $( this ).toggleClass( "active" );
});

不要忘记为“活动”类添加CSS。