CODEWITHSUNDEEP
javascripthtmlcss
Mitch
Mitch

Reputation: 1173

change menu color item when active

EDIT: It is working with this code:

        <div id="navigation">
            <ul class="menu">
                <li><a href="/index.php">Home</a></li>
                <li><a href="/about">About Me</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/projects">Projects</a></li>
                <li><a href="/contact">Contact</a></li>
                <li><a href="/time">Current Time</a></li>
                <li><a href="/help">Help Me</a></li>
            </ul>
        </div>

And the code to make the class active:

        <script>
            $(function () {
                var url = window.location.pathname,
                    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
                    $('#navigation a').each(function () {
                    if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
                        $(this).addClass('active');
                    }
                });    
            });
        </script>

This is working now, but when i'm going to Site/Projects/Project1 It makes nothing active. And when i go to Site/Projects it makes the projects tab active.

So it is working, but i also want the projects tab to stay active when i'm on Site/Projects/Project1

Upvotes: 5

Views: 184

Answers (3)

Mitch
Mitch

Reputation: 1173

Alright, i got it with a little bit of php. How my code looks right now:

$actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    //If the link is http://localhost:8080/ (Homepage), Then make "Home" Active
    if($actual_link == "http://localhost:8080/"){
        ?>
            <div id="navigation">
                <ul class="menu">
                    <li><a class="active" href="/">Home</a></li>
                    <li><a href="/about">About Me</a></li>
                    <li><a href="/blog">Blog</a></li>
                    <li><a href="/projects">Projects</a></li>
                    <li><a href="/contact">Contact</a></li>
                    <li><a href="/time">Current Time</a></li>
                    <li><a href="/help">Help Me</a></li>
                </ul>
            </div>
    <?php
    }
    //If link is not http://localhost:8080/ Then do this.
    else{
        ?>
    <div id="navigation">
        <ul class="menu">
            <li><a href="/">Home</a></li>
            <?php
                //If the links is LIKE http://localhost:8080/about Then make it active
                //So http://localhost:8080/about/lalala will make about active!
                if (strpos($actual_link,'http://localhost:8080/about') !== false) { ?>
            <li><a class="active" href="/about">About Me</a></li>
                <?php }else{ ?>
            <li><a href="/about">About Me</a></li>
                <?php }
                //If the links is LIKE http://localhost:8080/blog Then make it active
                //So http://localhost:8080/blog/lalala will make blog active!
                if (strpos($actual_link,'http://localhost:8080/blog') !== false) { ?>
            <li><a class="active" href="/blog">Blog</a></li>
                <?php }else{ ?>
            <li><a href="/blog">Blog</a></li>
                <?php }
                //If the links is LIKE http://localhost:8080/projects Then make it active
                //So http://localhost:8080/projects/lalala will make projects active!
                if (strpos($actual_link,'http://localhost:8080/projects') !== false) { ?>
            <li><a class="active" href="/projects">Projects</a></li>
                <?php }else{ ?>
            <li><a href="/projects">Projects</a></li>
                <?php }
                //If the link is LIKE http://localhost:8080/contact Then make it active
                //So http://localhost:8080/contact/lalala will make time active!
                if (strpos($actual_link,'http://localhost:8080/contact') !== false) { ?>
            <li><a class="active" href="/contact">Contact</a></li>
                <?php }else{ ?>
            <li><a href="/contact">Contact</a></li>
                <?php }
                //If the link is LIKE http://localhost:8080/time Then make it active
                //So http://localhost:8080/time/lalala will make time active!
                if (strpos($actual_link,'http://localhost:8080/time') !== false) { ?>
            <li><a class="active" href="/time">Current Time</a></li>
                <?php }else{ ?>
            <li><a href="/time">Current Time</a></li>
                <?php }
                //If the link is LIKE http://localhost:8080/help Then make it active
                //So http://localhost:8080/help/lalala will make help active!
                if (strpos($actual_link,'http://localhost:8080/help') !== false) { ?>
            <li><a class="active" href="/help">Help Me</a></li>
                <?php }else{ ?>
            <li><a href="/help">Help Me</a></li>
                <?php } ?>
        </ul>
    </div>
    <?php
    }

And i got it working :D Thanks for the help!

Upvotes: 1

Jay
Jay

Reputation: 1678

I don't know if you're happy to use jQuery on your page or not.

But here's a possible solution if you are:

https://jsfiddle.net/fwLfdn8w/16/

Have set it to compare all anchors to:

location.pathname

and add the class of active if they match

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Array index starting from zero. But you have started the for loop with count=1. May be that cause the issue. Kindly change the following code and test it out.

for(i=1;i<aObj.length;i++) {

should be

 for(i=0;i<=aObj.length;i++) {

Upvotes: 2

Related Questions