切换链接'；使用javascript单击时的活动

我有一个类似于这个问题的问题，我只是想在再次单击链接时禁用活动类。如有任何帮助，将不胜感激

HTML

  <div id="profile_list">
     <h2>Members: 37</h2>
     <a href="#Original_Founder" class="panel">• O.F.</a>
     <a href="#Founder" class="panel">• Founder</a>
     <a href="#Leader" class="panel">• Leader</a>
     <a href="#Senior_Admin" class="panel">• Sr. Admin</a>
     <a href="#Junior_Admin" class="panel">• Jr. Admin</a>
     <a href="#Full_Member" class="panel">• Full-Member</a>
     <a href="#Greenhorn" class="panel">• Greenhorn</a>
     <a href="#Inactive" class="panel">• Inactive</a>
     <a href="#Legend" class="panel">• Legend</a>
  </div>

CSS

 $('#profile_list a').click(function() {
    var a = $(this);
    $('#profile_list a').removeClass('active');
    $(this).addClass('active');
 });

 #profile_list {
    width: 250px;
    height: 328px;
    background-color: #333;
    background-image: -moz-linear-gradient(#777, #222);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#222));
    background-image: -webkit-linear-gradient(#777, #222);
    background-image: -o-linear-gradient(#777, #222);
    background-image: -ms-linear-gradient(#777, #222);
    background-image: linear-gradient(#777, #222);
    border: 1px solid #000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    float: left;
    position: relative;
    top: 20px;
    left: 20px;
    z-index: 2;
 }
 #profile_list h2 {
    width: 226px;
    height: 20px;
    padding: 10px 0;
    margin: 0 12px;
    border-bottom: 1px solid #444;
    float: left;
    color: #B45F04;
    font: 20px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
 }
 #profile_list a {
    width: 218px;
    height: 20px;
    padding: 4px 12px 7px 20px;
    color: #A4A4A4;
    float: left;
    font: 18px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
    position: relative;
    top: 5px;
 }
 #profile_list a:hover, #profile_list a.active {
    background: rgba(204, 204, 204, 0.5);
    -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    color: #FFF;
 }

// Add a click listener to the anchors of profile_list
$('#profile_list a').click(function () {
    // Set variables for this,
    // Whether I am the active one,
    // And if there are other active elements in this list
    var a = $(this),
        amIactive = a.hasClass('active'),
        areOthersActive = a.parent().children().hasClass('active');

    // If I'm active
    if (amIactive) {
        // Make me not active when I'm clicked
        a.removeClass('active');
    }
    // Otherwise, if none of my siblings are active
    else if(!areOthersActive){
        // Make me active
        a.addClass('active');
    }
});

---

然后执行两项检查，一项检查查看单击的锚点是否已处于活动状态，另一项检查查看是否有任何锚点处于活动状态

• 如果它已经处于活动状态，则通过删除该类来“取消活动”
• 如果它的一个同级在单击过程中处于活动状态，则不要激活它
• 如果它及其同级都未处于活动状态，请激活它

JS

 $('#profile_list a').click(function() {
    var a = $(this);
    $('#profile_list a').removeClass('active');
    $(this).addClass('active');
 });

 #profile_list {
    width: 250px;
    height: 328px;
    background-color: #333;
    background-image: -moz-linear-gradient(#777, #222);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#222));
    background-image: -webkit-linear-gradient(#777, #222);
    background-image: -o-linear-gradient(#777, #222);
    background-image: -ms-linear-gradient(#777, #222);
    background-image: linear-gradient(#777, #222);
    border: 1px solid #000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
    float: left;
    position: relative;
    top: 20px;
    left: 20px;
    z-index: 2;
 }
 #profile_list h2 {
    width: 226px;
    height: 20px;
    padding: 10px 0;
    margin: 0 12px;
    border-bottom: 1px solid #444;
    float: left;
    color: #B45F04;
    font: 20px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
 }
 #profile_list a {
    width: 218px;
    height: 20px;
    padding: 4px 12px 7px 20px;
    color: #A4A4A4;
    float: left;
    font: 18px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
    position: relative;
    top: 5px;
 }
 #profile_list a:hover, #profile_list a.active {
    background: rgba(204, 204, 204, 0.5);
    -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    color: #FFF;
 }

// Add a click listener to the anchors of profile_list
$('#profile_list a').click(function () {
    // Set variables for this,
    // Whether I am the active one,
    // And if there are other active elements in this list
    var a = $(this),
        amIactive = a.hasClass('active'),
        areOthersActive = a.parent().children().hasClass('active');

    // If I'm active
    if (amIactive) {
        // Make me not active when I'm clicked
        a.removeClass('active');
    }
    // Otherwise, if none of my siblings are active
    else if(!areOthersActive){
        // Make me active
        a.addClass('active');
    }
});

---

分叉处理更改：

您必须显示您的努力。您能显示链接的html吗？答案应该是类似于

document.getElementById（“[ID OF The]”）。className=“”

的东西，但是如果你有多个类，你就必须只删除那个类。提琴不只是发布提琴，用相关代码编辑你的问题。我不太懂javascript，我也在努力确保一次只能激活一个链接time@user3005115好的，检查我的编辑。这样，一次只能有一个处于活动状态。另外，请补充一点，您希望在您的问题中一次只激活一个。