CODEWITHSUNDEEP
jqueryhtml
Dark King
Dark King

Reputation: 71

Add 'active' class to navigation links de

I want to add an active class to the navigation link depending on which page im on.

Here is my navigation bar code.

<div id="navigation">
  <ul class="nav">
    <li><a href="index.php">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>

Upvotes: 1

Views: 2023

Answers (4)

Penny Liu
Penny Liu

Reputation: 17408

If you want to do it by jQuery, you can do that too. Here's how.

HTML

<div id="navigation">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="blog.php">Blog</a></li>
        <li><a href="members.php">Members</a></li>
        <li><a href="about.php">About</a></li>
    </ul>
</div>

JS

$(function () {
    // Get the last item in the path (e.g. index.php)
    let url = window.location.pathname.split('/').pop();

    // Add active nav class based on url
    $("#navigation ul li a").each(function () {
        if ($(this).attr("href") == url || $(this).attr("href") == '') {
            $(this).closest('li').addClass("active");
        }
    })

    // Add the active class into Home if user omit index.php from url
    if (url == '') {
        $("#navigation ul li").eq(0).addClass("active");
    }
});

Upvotes: 0

luukvhoudt
luukvhoudt

Reputation: 1992

Here is how it's done in PHP.

<?php
    $menu = array(
        array(
            'href' => 'index.php',
            'text' => 'Index',
        ),
        array(
            'href' => 'test.php',
            'text' => 'Test',
        ),
    );
?>
<nav>
    <ul class="menu">
        <?php
            foreach ($menu as $link) {
                $item='<li>';
                if (substr($_SERVER['REQUEST_URI'], 1) == $link['href']) {
                    $item.='<a href="'.$link['href'].'" class="active">'.$link['text'].'</a>';
                } else {
                    $item.='<a href="'.$link['href'].'">'.$link['text'].'</a>';
                }
                $item.='</li>';
                print $item;
            }
        ?>
    </ul>
</nav>

Like you can see I've used an array instead of some plain HTML, I suggest you to do the same for as many things as possible. This makes your code more "dynamic" and has many benefits.

Here is how it's done in JavaScript

<nav>
    <ul class="menu">
        <li><a href="index.php">Index</a></li>
        <li><a href="test.php">Test</a></li>
    </ul>
</nav>
<script type="text/javascript">
    var menu = document.querySelectorAll('.menu li a');
    for (var i = menu.length - 1; i >= 0; i--) {
        if (menu[i].href==document.URL) {
            menu[i].setAttribute("class", "active");
        }
    };
</script>

The jsfiddle

And not to forget, the jQuery of doing it..

<nav>
    <ul class="menu">
        <li><a href="index.php">Index</a></li>
        <li><a href="test.php">Test</a></li>
    </ul>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $('.menu li a').each(function() {
        if ($(this).attr('href')==location.pathname.substr(1)){
            $(this).addClass('active');
        }
    });
</script>

The jsfiddle

Upvotes: 2

manas
manas

Reputation: 1

Using jQuery solve this issue 

$(document).ready(function() {
            $('.nav li a').on('click', function(event) {
                $('.nav li a').removeClass('active').removeAttr('class');
                $(this).addClass('active');
            });
        });

Upvotes: 0

Zulfadly AshBurn
Zulfadly AshBurn

Reputation: 21

You can use css styling to do this.

css file

#navigation li a.current{
   color: #ffffff;
   background:#000000;
}

html file

<div id="navigation">
            <ul class="nav">

                <li><a class="current" href="index.php">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Members</a></li>
                <li><a href="#">About</a></li>

            </ul>
</div>

Upvotes: 0

Related Questions