Get url path and add class active on li

Question

I try to grab the url path and then add active class on li example: www.mysite.com/?p=xxxx

the x will change depending on which link the user clicks on

I tried this:

<ul class="top_menu">
<li class="tider"><a href="/?p=1884">Åbningstider</a></li>
<li class="butikker"><a href="/?p=1885">Butikker</a></li>
<li class="sker"><a href="/?p=1886">Det sker</a></li>
<li class="nyhedsbrev"><a href="/?p=1887">Nyhedsbrev</a></li>
<li class="vej"><a href="/?p=1888">Find vej</a></li>
</ul>

var text = window.location.href.match(/http:\/\/www\.mysite\.com\/(.+)/)[1].replace(/_/g,' ');
$("#nav li").filter(function() {
  return $.text([this]) == text;
}).addClass("active");

but nothing happens. What im i doing wrong?

firstly you could just use window.location.search, to skip the regex part — Stoia Alex
– Stoia Alex, Commented Aug 2, 2012 at 7:43

Kasper · Accepted Answer · 2012-08-03 08:39:23Z

7

This works!

$(document).ready(function(){

    var full_path = location.href.split("#")[0];

    $(".top_menu li a").each(function(){

        var $this = $(this);

        if($this.prop("href").split("#")[0] == full_path) {

            $(this).parent().addClass("active");

        }

    });

});

edited Aug 3, 2012 at 8:39

answered Aug 3, 2012 at 6:29

Kasper

1191 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas · Accepted Answer · 2012-08-02 11:19:26Z

1

You could use the ends with attribute selector:

var pid = '1885'; //Get the current value of p
$('#nav li a[href$="'+pid+'"]').parent().addClass('active');

This will get the link where the href attribute ends in pid (in this case 1885).

That will lead to problems if you have 2 values that end in the same string (like p=1885 and p=11885).

edited Aug 2, 2012 at 11:19

answered Aug 2, 2012 at 7:57

Thomas

8,8592 gold badges28 silver badges54 bronze badges

3 Comments

Kasper Over a year ago

Could you explain a littel bit more? Im not that skilled in jq

Kasper Over a year ago

Then i will have to make one for each link ?

Thomas Over a year ago

No, just once but you'll have to replace the first line with the current value for p. I recommend using document.location.search and running a regex on that.

Eduardo Marques · Accepted Answer · 2012-08-02 08:03:09Z

0

What about changing class names and use PHP and jQuery:

<?php

if(isset($_GET['p'])) {

    echo '<script type="text/javascript">
    $(document).ready(function(){';

    $from_url = $_GET['p'];

    echo '
    $(\'p_' . $from_url . '\').addClass(\'active\');
        });
    </script>';
    }

?>

For example, at "www.mysite.com/?p=1888" the above will print:

<script type="text/javascript">
$(document).ready(function(){
    $('.p_1888').addClass('active');
    });
</script>

It will add class "active" for the HTML with class name "p_1888". For example:

<li class="p_1888"><a href="/?p=1888">Find vej</a></li>

Also explained here.

answered Aug 2, 2012 at 8:03

Eduardo Marques

11 bronze badge

1 Comment

Kasper Over a year ago

Good idea, but the site is written in aspx. And i have no experience in aspx

Collectives™ on Stack Overflow

Get url path and add class active on li

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related