动态分配'活动'类

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");