jQuery active link current page

Question

I have tried several jQuery scripts to make my navigation have an active state of each button, when the user is on each page.

My navigation looks like this: http://jsfiddle.net/EWhS3/

or

<div id="wrapper">
        <div id="header">
            <img src="img/logo.png">
        </div>
        <!--header END-->
        <div id="nav">
            <ul>        
                <li><a href="index.php" class="select">Profil</a></li>
                <li><a href="referencer.php" class="pushlinks" class="select">Referencer</a></li>
                <li><a href="projekter.php" class="pushlinks" class="select">Projekter</a></li>
                <li><a href="galleri.php" class="pushlinks" class="select">Galleri</a></li>
                <li><a href="blog.php" class="pushlinks" class="select">Blog</a></li>
                <li><a href="#" class="pushlogin" class="select">Login</a></li>
            </ul>
        </div>
        <!--nav END-->
        <div id="content">
        </div>
    </div>

I want that the hover effect, will stay active, when the user visits each page.

I really hope someone could give me an idea for this. I tried several things but didn't really could make it work :(

Thanks in advance ;)

score 11 · Answer 1 · answered Apr 23 '14 at 18:49

11

You can do it easily

<script type="text/javascript">
  var loc = window.location.pathname;

   $('#nav').find('a').each(function() {
     $(this).toggleClass('active', $(this).attr('href') == loc);
  });
</script>

css:

#nav a.active{color: red}

answered Apr 23 '14 at 18:49

Md Rahman

1,812
1
14
15

1

Duplicate of http://stackoverflow.com/a/9863488/383904 ... – Roko C. Buljan Jun 23 '16 at 15:59

Arun P Johny · Answer 2 · 2013-11-13T01:06:46.850

2

Try

jQuery(function () {
    var page = location.pathname.split('/').pop();
    alert(page)
    $('#nav li a[href="' + page + '"]').addClass('active')
})

Also change the hover & active rule to

#nav ul li a:hover, #nav ul li a.active {
    ...
}

Demo: Fiddle

edited Nov 13 '13 at 01:06

answered Nov 13 '13 at 00:52

Arun P Johny

384,651
66
527
531

It didn't work :( Only first link is active, and it has an error as the text link should be purple while active, as its the same effect as hover. When clicking on the other links it doesnt makes the currentpage that im on active – Kh4zy Nov 13 '13 at 00:56
@user2985592 when you move to a new page whether the page is reloaded or are you using ajax to load the new pages – Arun P Johny Nov 13 '13 at 00:58
Its only when i have clicked the first link. Im dont have any experience with jQuery. I use jquery-1.9.1.min.js – Kh4zy Nov 13 '13 at 01:05
@user2985592 I've added an alert in the script, check when you click on the link the alert is coming – Arun P Johny Nov 13 '13 at 01:07
Im getting a blank alert when loading the page. The link is not active. but when i press the index.php it turns active and im getting an alert with: index.php – Kh4zy Nov 13 '13 at 01:12
Hello. I have found a script that worked ok. Yours worked too, i just had to apply the JS script to my other websites. $(function () { var url = window.location.pathname, urlRegExp = new RegExp(url.replace(/\/$/, '') + "$"); $('a').each(function () { if (urlRegExp.test(this.href.replace(/\/$/, ''))) { $(this).addClass('active'); } }); }); but i have a problem with this, and yours too. I need the index.php (profil) to be tagged as active from start, and not only when its clicked :) – Kh4zy Nov 13 '13 at 03:55
@user2985592 what is the url of the first page if it is `index.php` it should get tagged – Arun P Johny Nov 13 '13 at 03:58
The url is just index.php. But if i enter my site(i work offline) but if i enter my url localhost/site/ it doesnt get tagged, only if i make the url localhost/site/index.php – Kh4zy Nov 13 '13 at 11:20

score 0 · Answer 3 · answered Nov 13 '13 at 03:47

<div id="nav">
        <ul>        
            <li id="nav1"><a href="index.php">Profil</a></li>
            <li id="nav2"><a href="referencer.php" class="pushlinks" class="select">Referencer</a></li>
            <li id="nav3"><a href="projekter.php" class="pushlinks" class="select">Projekter</a></li>
            <li id="nav4"><a href="galleri.php" class="pushlinks" class="select">Galleri</a></li>
            <li id="nav5"><a href="blog.php" class="pushlinks" class="select">Blog</a></li>
            <li id="nav6"><a href="#" class="pushlogin" class="select">Login</a></li>
        </ul>
    </div>

<script type="text/javascript">//<![CDATA[
$('#nav1').addClass('active');  
  //]]></script>


div#nav ul li.active{
 /*your style */
}

jQuery active link current page

3 Answers3

Linked