動態分配'活動'類

Question

我想動態分配不同的鏈接類"active"爲了改變CSS。有沒有人有任何想法如何做到這一點？

<div class="livello2"> 
    <div class="live"> 
     <a href="./Live.php"><img src="templates/css/comp/pulsante_live_off.png"></a> 
    </div> 
    <nav class="menu"> 
     <ul> 
      <a href="./index.php"><li>HOME</li></a> 
      <a href="./Concerti.php"><li>CONCERTI</li></a> 
     </ul> 
    </nav> 
</div> 

---

我有這樣的：

<div class="livello2"> 
       <div class="live"> 
        <a href="./Live.php"><img src="templates/css/comp/pulsante_live_off.png"></a> 
       </div> 
       <nav class="menu"> 
        <ul> 
         <a href="./index.php"><li>HOME</li></a> 
         <a href="./Concerti.php"><li>CONCERTI</li></a> 

        </ul> 
       </nav> 
     </div> 

我認爲jQuery腳本應該是這樣的：

click(function(){ 
    $link.removeClass('active'); 
    $link2.addClass('active'); 
    }); 

Answer 1

此解決方案假定您要添加 「活動」 到菜單鏈接：

HTML：

<div class="livello2"> 
    <div class="live"> 
     <a href="./Live.php"><img src="templates/css/comp/pulsante_live_off.png"></a> 
    </div> 
    <nav class="menu"> 
     <ul> 
      <li><a href="./index.php">HOME</a></li> 
      <li><a href="./Concerti.php">CONCERTI</a></li> 
     </ul> 
    </nav> 
</div> 

的jQuery：

$(function() { 
    $('.menu a').click(function(e) { 
     // you usually want to prevent default for handling link clicks, 
     // otherwise the browser follows the href (if that's intended skip this) 
     e.preventDefault(); 

     $('.menu a').not(this).removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

Answer 2

document.getElementById("yourElementsId").classList.toggle("active"); 

這首先讓你想通過其ID修改，然後只需切換 「活動」 類的項目。您還可以使用以下方法：

classList.add("active"); 
classList.remove("active"); 

---

爲此在jQuery的你只需做到以下幾點：

$("#yourElementsId").addClass("active"); 
$("#yourElementsId").removeClass("active"); 
$("#yourElementsId").toggleClass("active");