jQuery在单击时添加类，在单击另一个时删除

I have the markup like this

我有这样的标记

<div class="personal-menu-content">
    <ul>
         <li><a data-menu-item="lessons" class="personal-menu-item lessons" href="#">Lessons</a></li>
         <li><a data-menu-item="profile" class="personal-menu-item profile" href="#">Edit Profile</a></li>
         <li><a data-menu-item="library" class="personal-menu-item library" href="#">Your Library</a></li>
    </ul>
</div>

<div class="contents">
    <div id="lessons">
        <h2>Lessons text here</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <div id="profile">
        <h2>profile text here</h2>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    </div>
    <div id="library">
        <h2>library text here</h2>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,</p>
    </div>
</div>

and the JS like this

和JS一样

$('div#profile').show();
    $('body').on('click','a.personal-menu-item', function(e) {
        e.preventDefault();
        var selectedItem = $(this).attr('data-menu-item');
        if(selectedItem == 'lessons') {
            $('div#lessons').show();
            $('div#profile').hide();
            $('div#library').hide();
        }
        if(selectedItem == 'profile') {
            $('div#lessons').hide();
            $('div#profile').show();
            $('div#library').hide();
        }
        if(selectedItem == 'library') {
            $('div#lessons').hide();
            $('div#profile').hide();
            $('div#library').show();
        }
    });

so here I want that when I click on the lessons then only lessons content will be shown , like this when I click on profile and library then only profile and library will be shown. Here its working fine but I wanted to know how to add a class active when one item is clicked within that anchor tag. Lets say I click on lessons then one active class should be added to the lessons anchor tag and when I click on profile then the active class should be remove from lessons anchor tag and it should add class active in profile anchor tag. Here is my fiddle so far

所以在这里我希望当我点击课程时，只会显示课程内容，这样当我点击个人资料和图书馆时，只会显示个人资料和图书馆。这里工作正常，但我想知道如何在该锚标记中单击一个项目时添加一个活动类。假设我单击课程然后应该将一个活动类添加到课程锚标记中，当我单击配置文件时，应该从课程锚标记中删除活动类，并且它应该在配置文件锚标记中添加活动类。到目前为止，这是我的小提琴

4 个解决方案

#1

You can just use this reference in the click handler

您可以在单击处理程序中使用此引用

$('body').on('click.menu', 'a.personal-menu-item', function(e) {
  e.preventDefault();
  var selectedItem = $(this).attr('data-menu-item');
  var $selected = $('#' + selectedItem).show();
  $('.contents > div').not($selected).hide();
  $('.personal-menu-content .active').removeClass('active')
  $(this).addClass('active');
});
$('.personal-menu-content a[data-menu-item="profile"]').trigger('click.menu')

.contents > div {
  display: none;
}
.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="personal-menu-content">
  <ul>
    <li><a data-menu-item="lessons" class="personal-menu-item lessons" href="#">Lessons</a></li>
    <li><a data-menu-item="profile" class="personal-menu-item profile" href="#">Edit Profile</a></li>
    <li><a data-menu-item="library" class="personal-menu-item library" href="#">Your Library</a></li>
  </ul>
</div>

<div class="contents">
    <div id="lessons">
        <h2>Lessons text here</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <div id="profile">
        <h2>profile text here</h2>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
    </div>
    <div id="library">
        <h2>library text here</h2>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,</p>
    </div>
</div>

#2

Short and sweet way.

简短而甜蜜的方式。

$(".personal-menu-item").click(function(){

 $(".personal-menu-item").removeClass("active");
 $(this).addClass("active");

});

#3

Basically, hide them all, then show only the one you want. Only need to change two lines :)

基本上，隐藏它们全部，然后只显示你想要的那个。只需改变两行:)

Edit: Similarly, remove all the active classes and add it only to the one that was clicked.

编辑：同样，删除所有活动类，并将其仅添加到单击的类。

$('body').on('click','a.personal-menu-item', function(e) {
    e.preventDefault();

    $('.personal-menu-content .active').removeClass('active')

    var selectedItem = $(this).addClass('active').attr('data-menu-item');

    $('.contents > div').hide();
    $('#' + selectedItem).show();
});

#4

Try this

尝试这个

$('div#profile').show();
$('body').on('click','a.personal-menu-item', function(e) {
    e.preventDefault();
     var selectedItem = $(this).parent('li').index();
    alert(selectedItem);
     $('.contents div').hide();         
     $('.contents div').eq(selectedItem).show();
});

https://jsfiddle.net/pjdq1h83/

#1