如何將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') 
    } 
}