탐색에서 선택한 항목에 클래스를 적용하는 방법은 무엇입니까?

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