如何使用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

我不知道你为什么使用toggleClass()而你只需要addClass('active')而且不需要使用.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();