如何将类应用于导航中的选定项 - How to apply a class to selected item in navigation?

How to apply a class to selected item in navigation?

本文关键字：导航应用于 | 更新日期: 2023-09-27

我搜索了同一问题的各种答案，但没有一个适合我的问题。我有一个部分硬编码和数据库驱动的导航，我想将一个类应用于已单击的项目。我尝试了这个简单的JS函数，但它不起作用。

<ul id="menu">
    <li onclick="funk(this)"><a href="index.php">Home</a></li>
    <?php
    $query=mysqli_query($conn,"SELECT * FROM categories");
    while($row=mysqli_fetch_array($query)){
    $cat_id=$row['cat_id'];
    $cat_title=$row['cat_title'];
    echo "<li onclick='funk(this)'><a href='index.php?cat=$cat_id'>$cat_title</a></li>";
    }
    ?>
</ul>

function funk(el) {
    var kids = document.getElementById("menu").children;
    for(var i = 0; i < kids.length; i++){
       kids[i].className="c1";
    }
    el.className="c2";
}

.c2{background-color:#f65;}
.c1{background-color:#000;}

任何人？

或者

，您可以使用$_GET['cat']知道您现在的位置，并在while循环中添加一个条件来标记您当前的位置。粗略的例子：

while($row = mysqli_fetch_array($query)){
    $cat_id = $row['cat_id'];
    $cat_title = $row['cat_title'];
    $active = (isset($_GET['cat']) && $_GET['cat'] == $cat_id) ? 'c2' : 'c1'; // class switches
    echo "<li class='$active'><a href='index.php?cat=$cat_id'>$cat_title</a></li>";
}