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

jQuery add class when clicked and remove when clicked on another

本文关键字：单击 删除 另一个 添加 jQuery      更新时间：2023-10-09

我有这样的标记

<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>

和像这个的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();
        }
    });

所以在这里，我希望当我点击课程时，只会显示课程内容，就像这样，当我点击档案和库时，只显示档案和库。这里工作正常，但我想知道如何在锚标记中单击一个项目时添加一个活动类。比方说，我点击课程，然后一个活动类应该添加到课程锚定标签，当我点击个人资料时，活动类应该从课程锚定标记中删除，它应该在个人资料锚定标签中添加活动类。到目前为止，这是我的小提琴

短平快的方式。

$(".personal-menu-item").click(function(){
 $(".personal-menu-item").removeClass("active");
 $(this).addClass("active");
});

您可以在点击处理程序中使用this引用

$('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>

基本上，将它们全部隐藏，然后只显示您想要的一个。只需更改两行：）

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

$('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();
});

试试这个

$('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/

相关文章：