如何使用while循環和jquery動態更改菜單欄的活動CSS？

Question

我進行循環以加載我的崩潰數據。 CSS樣式不會改變。

PHP

<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Title">
        <a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponent" data-parent="#exampleAccordion">
            <i class="fa fa-dashboard"></i><span class="nav-link-text"> Title </span></a>

    <?php

        $category_query = "SELECT * FROM category WHERE ... ";
        $stmt = $heidisql->query($category_query);

        $row_count = $heidisql->query('SELECT count(*) from category WHERE ... ');
        $data_exists = $row_count->fetchColumn();

        echo '<ul class="nav-second-level collapse" id="collapseComponent">';

        if ($data_exists > 0){
            while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                $test_id = $row["id"];
                $test_title = $row["title"];
                $test_link = $row["link"];

                echo '<li class="nav-item second-level-collapse">
                    <a class="nav-link" id="category-'.$test_id.'" href="'.$test_link.'">'.$test_title.'</a></li>';
            }
            echo "</ul></li>";

        }

    ?>

循環工作，但我不能使其根據我所在的鏈接動態地更改css。 jQuery代碼

<script>

var loc = window.location.pathname;

$('.nav-second-level').find('a.nav-link').each(function() {
    $(this).toggleClass('active', $(this).attr('href') == loc);
});

</script>

CSS用於更改樣式

.nav-second-level > li.nav-item a.active {
background: rgba(255, 255, 255, 0.6);
color: black;
}

我曾經那樣做

$menuLinkid = basename($_SERVER['PHP_SELF'],".php");

if ($menuLinkid == "test") {
$menu = "active-Sidebar-Link";
?>

HTML

<li class="nav-item second-level-collapse">
    <a class="nav-link <?php echo $menu; ?>" id="category-'.$test_id.'" href="'.$test_link.'">'.$test_title.'</a></li>

.navbar-collapse > ul > li.nav-item a.active-Sidebar-Link{
 background: rgba(255, 255, 255, 0.6);
 color:black;

}

Answer 1

我不知道為什么在只需要添加addClass('active')就使用toggleClass()並且不需要使用.each()您可以直接使用$('.nav-second-level a.nav-link[href="'+loc+'"]')像這樣

$(document).ready(function(){
  var loc = window.location.href;
  $('.nav-second-level a.nav-link').removeClass('active').filter('[href="'+loc+'"]').addClass('active');
});

並且不要忘記將代碼包裝在$(document).ready()

注意：也許問題出在小寫和大寫字母以及空格，也可以用來檢查此問題

$test_link = strtolower(trim($row["link"]));

和

var loc = window.location.href.toLowerCase().trim();