如何将class active设置为div？

Question

我在this fiddle这个菜单，我想上单击设置活动div：

<div class="account-item"> 
    <div class="account-heading active"> 
     <h4 class="account-title"> 
      <a href="#/Transactions">2. TRANSACTION_HISTORY</a> 
     </h4> 
    </div> 
</div> 

我有这样的剧本，但我得到选定的所有div

function SetActiveDiv() 
{ 
    var element = $("a").parent().parent(); 
    if (element.hasClass("active")) { 
     element.removeClass("active"); 
    } else { 
     element.addClass("active"); 
    } 
} 

Answer 1

你需要通过点击的元素参考

<a href="#/Tickets" onclick="SetActiveDiv(this);">1.MY_TICKETS</a> 

然后

function SetActiveDiv(el) { 

    var element = $(el).closest('.account-heading'); 
    element.toggleClass("active"); 
} 

演示：Fiddle

---

注：由于您使用jQuery，尝试使用jQuery的事件处理程序，而不是内嵌处理器

所以

<a href="#/Tickets">1.MY_TICKETS</a> 

然后

jQuery(function ($) { 
    $('.account-group .account-title a').click(function() { 
     var $heading = $(this).closest('.account-heading').toggleClass("active"); 
     $('.account-group .account-heading.active').not($heading).removeClass('active'); 
    }) 
}) 

演示：Fiddle

Answer 2

在HTML onclick="SetActiveLink('#/*')"删除所有的功能，然后使用这个jQuery的功能，所以你不会重复：

$(".account-group a").on("click", function(){ 
    $(".account-group a").removeClass("active"); 
    $(this).addClass("active"); 
}); 

---

这里看到的结果是：

$(".account-group a").on("click", function(){ 
 
    $(".account-group a").removeClass("active"); 
 
    $(this).addClass("active"); 
 
});

.active { 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-2 col-md-3 left-sidebar-container"> 
 
    <div class="left-sidebar"> 
 
     <div class="account"> 
 
      <h1>MY_ACCOUNT</h1> 
 
      <div class="account-group" id="accordion"> 
 
       <div class="account-item"> 
 
        <div class="account-heading"> 
 
         <h4 class="account-title"> 
 
          <a href="#/Tickets">1.MY_TICKETS</a> 
 
         </h4> 
 
        </div> 
 
       </div> 
 

 
       <div class="account-item"> 
 
        <div class="account-heading"> 
 
         <h4 class="account-title"> 
 
          <a href="#/Transactions">2. TRANSACTION_HISTORY</a> 
 
         </h4> 
 
        </div> 
 
       </div> 
 

 
       <div class="account-item"> 
 
        <div class="account-heading"> 
 
         <h4 class="account-title"> 
 
          <a href="#">3. PAYIN</a> 
 
         </h4> 
 
        </div> 
 
       </div> 
 

 
       <div class="account-item"> 
 
        <div class="account-heading"> 
 
         <h4 class="account-title"> 
 
          <a href="#">4.PAYOUT</a> 
 
         </h4> 
 
        </div> 
 
       </div> 
 

 
       <div class="account-item"> 
 
        <div class="account-heading active"> 
 
         <h4 class="account-title has-sub"> 
 
          <a data-toggle="collapse" data-parent="#accordion" href="#settings">5.SETTINGS</a> 
 
         </h4> 
 
        </div> 
 
        <div id="settings" class="account-collapse collapse in"> 
 
         <div class="account-body"> 
 
          <a href="#/PersonalInfo" class="active-link">PERSONAL_INFORMATION</a> 
 
          <a href="#/Notifications">NOTIFICATIONS</a> 
 
          <a href="#/PasswordChange">CHANGE_PASSWORD</a> 
 
          <a href="#">GAME_SETTINGS</a> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <div class="account-item"> 
 
        <div class="account-heading"> 
 
         <h4 class="account-title has-sub"> 
 
          <a data-toggle="collapse" data-parent="#accordion" href="#promotions">6.PROMOTIONS</a> 
 
         </h4> 
 
        </div> 
 
        <div id="promotions" class="account-collapse collapse"> 
 
         <div class="account-body"> 
 
          <a href="#">BONUSES</a> 
 
          <a href="#">COMPETITIONS</a> 
 
          <a href="#">VOUCHER_REDEEM</a> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <div class="account-item"> 
 
        <div class="account-heading"> 
 
         <h4 class="account-title"> 
 
          <a href="#">7. SYSTEM_MESSAGES</a> 
 
         </h4> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

只是让选择看起来像（双级选择）：

var element = $(".account-heading.active"); 

Answer 4

你需要看看你的代码，并了解它在做什么。采取以下行：

$("a").parent().parent(); 

这是什么呢？它选择每个锚点，然后选择父代，然后选择该父代的父代。

考虑到你使用jQuery，你可以使用它来绑定事件处理程序，而不是在你的html中使用onClick（这是考虑不好的做法）。

$('a').on('click', function() { 
    $('.account-heading').removeClass('active'); 
    $(this).parent().parent().addClass('active'); 
}); 

的jsfiddle：http://fiddle.jshell.net/jxmbj36s/5/

Answer 5

我认为下面的代码将有助于

function SetActiveDiv() { 
    var el = $("a").closest("div.account-heading")[0]; 
    var el = $("a").parent().parent(); 
    if ($(el).hasClass('active')) { 
    $(el).removeClass('active') 
    } else { 
    $(el).addClass('active') 
    } 
}