CODEWITHSUNDEEP
javascriptphphtmlmenu
Muhammad Khaled
Muhammad Khaled

Reputation: 25

when I Added .active class to menu it not working correctly

I am trying to add .active class to menu in my php website using javascript but the problem that when I click on the link, it adds .active for very very short time and after that it remove it 

      $(document).ready(function(){$(document).on('click','ul li a',function(){  $('li a').removeClass("active");
        $(this).addClass("active");
 }); });

and code for menu is 

<ul class="nav ls navbar-nav ">
 <li><a href="<?php echo SITE ?>contact_us.php" class="active">İletişim</a></li>
       <li><a href="<?php echo SITE ?>gallery.php">gallery</a></li>
  </ul>

Upvotes: 1

Views: 2033

Answers (3)

Tabby
Tabby

Reputation: 21

I had similiar problem and was using this code(Wrong Way which didn't work):

<li class="nav-item @if(request()->url() == route('admin.dashboard')){{'active'}} @endif">
  <a class="nav-link " href="{{ url('/admin') }}">
                    <span data-feather="home"></span>
                    Dashboard <span class="sr-only">(current)</span>
  </a>
</li>

Then I applied the active class on <a> tag rather then <li> and it worked for me (Code that worked for me):

<li class="nav-item">
  <a class="nav-link @if(request()->url() == route('admin.dashboard')){{'active'}} @endif" href="{{ url('/admin') }}">
                    <span data-feather="home"></span>
                    Dashboard <span class="sr-only">(current)</span>
  </a>
</li>

I read the link Problem with the menu and "active" class

and that article said that we should not use active class with <a> instead with <li> but in my case the opposite worked and I still don't know why..

Upvotes: 0

sammysaglam
sammysaglam

Reputation: 433

JavaScript only affects what is currently on the page. If you use jQuery "addClass", when you reload the page, then the entire HTML will reset, and the .active class will be lost.

Instead of JavaScript, you must use PHP on the back-end to detect what page the browser is currently on. The below code, keeps the jQuery you want (even though it is not necessary), but also uses PHP function "create_nav_link" to detect what page you are currently on, and adds 'class="active"' to the links.

The entire <script> section below can be removed, and the code will still work.

Try to copy & paste the following, and please feel free to ask me questions in comments:

<html>
<head>
    <style>
        a {
            color : #000;
        }

        a.active {
            color : #F00;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<ul class="nav ls navbar-nav ">
    <li><?php create_nav_link('/contact_us.php','İletişim') ; ?></li>
    <li><?php create_nav_link('/gallery.php','gallery') ; ?></li>
</ul>
<?php

    function create_nav_link($url,$label) {

        echo '<a href="' . $url . '"' ;
        if ( $_SERVER['REQUEST_URI'] == $url ) echo ' class="active"' ;
        echo '>' . $label . '</a></li>' ;

    }

?>
<script>
    $(document).ready(function () {
        $(document).on('click', 'ul li a', function () {
            $('li a').removeClass("active");
            $(this).addClass("active");
        })
    });
</script>
</body>
</html>

Upvotes: 0

sammysaglam
sammysaglam

Reputation: 433

When you click on the link, the URL changes (i.e. page reloads) and the HTML resets -> so, you lose the .active class.

Try this:

<script>

    $(document).ready(function(){
        $(document).on('click','ul li a',function(){
            $('li a').removeClass("active");
            $(this).addClass("active");

            // without this below, the click on the link changes
            // the page, so the HTML gets reset
            return false ;
        })
    }) ;

</script>

Upvotes: 1

Related Questions