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, Aug 02 '12 at 07:43

Kasper · Accepted Answer · 2012-08-03T08:39:23.610

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 03 '12 at 08:39

answered Aug 03 '12 at 06:29

Kasper

119
1
12

Thomas · Answer 2 · 2012-08-02T11:19:26.290

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 02 '12 at 11:19

answered Aug 02 '12 at 07:57

Thomas

8,426
1
25
49

Could you explain a littel bit more? Im not that skilled in jq – Kasper Aug 02 '12 at 10:39
Then i will have to make one for each link ? – Kasper Aug 02 '12 at 11:57
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. – Thomas Aug 02 '12 at 12:31

score 0 · Answer 3 · answered Aug 02 '12 at 08:03

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.

Good idea, but the site is written in aspx. And i have no experience in aspx — Kasper, Aug 02 '12 at 10:38

Get url path and add class active on li

3 Answers3

Linked