单击菜单项

时间:2017-02-25 11:26:38

标签: javascript jquery

我想在点击带有“.menu-item”类的菜单项后添加并立即删除类“.crome”的所有页面元素的类“.current”。

<ul id="navigation">
  <li class="menu-item"><a href="#link-1">1</a></li>
  <li class="menu-item"><a href="#link-2">2</a></li>
  <li class="menu-item"><a href="#link-3">3</a></li>
  <li class="menu-item"><a href="#link-4">4</a></li>
  <li class="menu-item"><a href="#link-5">5</a></li>
  <li class="menu-item"><a href="#link-6">6</a></li>
  <li class="menu-item"><a href="#link-7">7</a></li>
  <li class="menu-item"><a href="#link-8">8</a></li>
  <li class="menu-item"><a href="#link-9">9</a></li>
</ul>

2 个答案:

答案 0 :(得分:0)

这就是我能想到的阅读你所要求的东西。

点击

后向所有内容添加课程
$(".menu-item").on("click",function(){
    //this is to add to all 
    $("*").addClass("current");
    //this is to add to all with class chrome
    $(".chrome").addClass("current");
});

删除所有

$(".menu-item").on("click",function(){
    //this is to remove all 
    $("*").removeClass("current");
    //this is to remove classes all from .chrome
    $(".chrome").removeClass("current");
});

两个

$(".menu-item").on("click",function(){
    //add remove all
    $("*")$("*").addClass("current").removeClass("current");
    //add remove all from .chrome
    $(".chrome")$("*").addClass("current").removeClass("current");
});

答案 1 :(得分:0)

请查看jQuery文档中的addClass()removeClass()。要添加类,然后立即将其删除,您可以使用以下内容:

$('.menu-item').on('click', function() {  
    $('.chrome').addClass('current').removeClass('current');
});