CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
JOnatha Flint
JOnatha Flint

Reputation: 53

How to dynamically change active css for menubar using while loop and jquery?

I make a loop to load my collapse data. The css style does not change.

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

        }

    ?>

The loop work but I cannot make it do dynamically change css base on which link I'm on. Jquery code

<script>

var loc = window.location.pathname;

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

</script>

CSS For change the style

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

I used to do it like that 

$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;

}

Upvotes: 0

Views: 269

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

I don't know why you're using toggleClass() while you just need to addClass('active') And No need to use .each() You can directly use $('.nav-second-level a.nav-link[href="'+loc+'"]') like so

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

And don't forget to wrap your code in $(document).ready()

Notice: maybe the problem comes from lowercase and upper case letters and white spaces as well to check this you can use

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

And 

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

Upvotes: 1

Related Questions