需要帮助使用jquery选择器来选择特定元素

Question

大家好我需要一些帮助选择侧栏中的特定元素来添加和删除一个Active类，我不想在jQuery中使用next（）。next（）选择器重复我的自我

$(document).ready(function () {
        //toggle class Active from sub menu items
        $('.w3-card a').click(function () {
            $(this).addClass('active-menu').siblings().removeClass('active-menu');
            $(this).parent().next().next().children().removeClass('active-menu');
            $(this).parent().next().next().next().children().removeClass('active-menu');
            $(this).parent().prev().prev().prev().children().removeClass('active-menu');
            $(this).parent().prev().prev().children().removeClass('active-menu');

        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
        <!-- Home Link -->
        <a href="index.html" class="w3-bar-item w3-button" target="_top">Home</a>
        <!-- Group 1 -->
        <button class="w3-button w3-block w3-left-align" onclick="myAccFunc1()">
            iLearn Basics
            <i class="fas fa-caret-down"></i>
        </button>
        <div id="demoAcc" class="w3-hide w3-white w3-card">
            <a href="ilearn_basics/essentials.html" class="w3-bar-item w3-button" target="contentFrame">Essentials</a>
            <a href="ilearn_basics/global_navigation.html" class="w3-bar-item w3-button" target="contentFrame">Global
                Navigation Menu</a>
        </div>
        <!-- Group 2 -->
        <button class="w3-button w3-block w3-left-align" onclick="myAccFunc2()">
            Course Work
            <i class="fas fa-caret-down"></i>
        </button>
        <div id="demoAcc2" class="w3-hide w3-white w3-card">
            <a href="course_work/quizzes-exam.html" class="w3-bar-item w3-button" target="contentFrame">Quizzes &amp; Exams</a>
            <a href="course_work/assignments.html" class="w3-bar-item w3-button" target="contentFrame">Assignments</a>
            <a href="course_work/discussion-board.html" class="w3-bar-item w3-button" target="contentFrame">Discussion
                Board</a>
            <a href="course_work/content-editor.html" class="w3-bar-item w3-button" target="contentFrame">Content Editor</a>
        </div>
        <!-- Individual links -->
        <a id="my-grade" href="my_grades/my-grade.html" class="w3-bar-item w3-button" target="contentFrame">My Grades</a>
        <!-- Group 2 -->
        <button class="w3-button w3-block w3-left-align" onclick="myAccFunc3()">
            Communication
            <i class="fas fa-caret-down"></i>
        </button>
        <div id="demoAcc3" class="w3-hide w3-white w3-card">
            <a href="communication/bb-email.html" class="w3-bar-item w3-button" target="contentFrame">Email in iLearn</a>
            <a href="communication/notifications.html" class="w3-bar-item w3-button" target="contentFrame">Notifications</a>
            <a href="communication/social.html" class="w3-bar-item w3-button" target="contentFrame">Social Learning Tools</a>
        </div>
    </div>

Answer 1

我想你可以缩短它：

$('.w3-card a').click(function(){     
    $('.active-menu').removeClass('active-menu');
    $(this).addClass('active-menu').siblings().removeClass('active-menu');
});

Answer 2

您的代码似乎是在单击链接时从所有链接中删除active-menu类。为此，您可以使用以下代码：

$('.w3-card a').click(function(){
  $('.w3-card a').removeClass('active-menu');
  $(this).addClass('active-menu');
});

工作样本：

$('.w3-card a').click(function(){ 
  $('.w3-card a').removeClass('active-menu');    
  $(this).addClass('active-menu');
});

.active-menu {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-sidebar w3-bar-block w3-light-grey w3-card" style="width:200px;">
        <!-- Home Link -->
        <a href="index.html" class="w3-bar-item w3-button" target="_top">Home</a>
        <!-- Group 1 -->
        <button class="w3-button w3-block w3-left-align" onclick="myAccFunc1()">
            iLearn Basics
            <i class="fas fa-caret-down"></i>
        </button>
        <div id="demoAcc" class="w3-hide w3-white w3-card">
            <a href="ilearn_basics/essentials.html" class="w3-bar-item w3-button" target="contentFrame">Essentials</a>
            <a href="ilearn_basics/global_navigation.html" class="w3-bar-item w3-button" target="contentFrame">Global
                Navigation Menu</a>
        </div>
        <!-- Group 2 -->
        <button class="w3-button w3-block w3-left-align" onclick="myAccFunc2()">
            Course Work
            <i class="fas fa-caret-down"></i>
        </button>
        <div id="demoAcc2" class="w3-hide w3-white w3-card">
            <a href="course_work/quizzes-exam.html" class="w3-bar-item w3-button" target="contentFrame">Quizzes &amp; Exams</a>
            <a href="course_work/assignments.html" class="w3-bar-item w3-button" target="contentFrame">Assignments</a>
            <a href="course_work/discussion-board.html" class="w3-bar-item w3-button" target="contentFrame">Discussion
                Board</a>
            <a href="course_work/content-editor.html" class="w3-bar-item w3-button" target="contentFrame">Content Editor</a>
        </div>
        <!-- Individual links -->
        <a id="my-grade" href="my_grades/my-grade.html" class="w3-bar-item w3-button" target="contentFrame">My Grades</a>
        <!-- Group 2 -->
        <button class="w3-button w3-block w3-left-align" onclick="myAccFunc3()">
            Communication
            <i class="fas fa-caret-down"></i>
        </button>
        <div id="demoAcc3" class="w3-hide w3-white w3-card">
            <a href="communication/bb-email.html" class="w3-bar-item w3-button" target="contentFrame">Email in iLearn</a>
            <a href="communication/notifications.html" class="w3-bar-item w3-button" target="contentFrame">Notifications</a>
            <a href="communication/social.html" class="w3-bar-item w3-button" target="contentFrame">Social Learning Tools</a>
        </div>
    </div>

如果要仅从同一组的链接中删除active-menu类，只需将JS替换为以下js：

$('.w3-card a').click(function(){
  $(this).addClass('active-menu').siblings().removeClass('active-menu');
});