Как применить класс к выбранному элементу в навигации?

Question

Я искал различные ответы по той же проблеме, но ни одна из них не соответствовала моей проблеме. У меня есть навигация, которая частично жестко закодирована и управляется базой данных, и я хочу применить класс к элементу, который был нажат. Я пробовал эту простую функцию 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;} 

Кто-нибудь?

Answer 1

Кроме того, вы можете просто использовать $_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>"; 
}