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

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

首先获取您希望通过其ID修改的项目，然后只需切换“活动”类。您还可以使用以下方法：

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

要在jQuery中执行此操作，您只需执行以下操作：

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

Answer 2

此解决方案假定您要在菜单链接中添加“活动”：

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');
    });
});

动态分配“活动”类

2 个答案: