highlight main menu item when sub item is open

Question

In my web site I have a menu bar with drop down menus for some of the items. When viewing one of the sub-pages I want the parent item in the menu bar to be highlighted (class='active).

Here is my code:

<div id="sidebar-left">
    <div class="menu">
        <ul class="listeohne">
            <li class="color1" id='active'><a href="index.php">Startseite</a>
            </li>
            <li class="color2"><a href="">Wer wir sind</a>

                <ul>
                    <li class="whiteback">
<a href="werwirsind.php">Einf&uuml;hrung</a> 
                    </li>
                    <li class="whiteback"><a href="statuten.php">Statuten</a> 
                    </li>
                    <li class="whiteback"><a href="vorstand.php">Vorstand </a> 
                    </li>
                    <li class="whiteback borderbottomgrey"><a href="pdf/organigramm_svnw_13.pdf">Organisation </a> 
                    </li>
                </ul>
            </li>

View example site www.nzz.ch. My site is www.svnw.ch.

I have tried numerous solutions described in this forum, but none of them works for me, but then I am not an expert.

Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved. Posting a [Short, Self Contained, Correct Example (SSCCE)](http://www.sscce.org/) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! — j08691, Aug 26 '13 at 16:50
`

Startseite

Wer wir sind

Einführung

Statuten

Vorstand

Organisation

` — kurt36, Aug 26 '13 at 17:05

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

Get the link of the page you are currently one :

var pathname = window.location.pathname;

or

$(location).attr('href');

via Get current URL in JavaScript?

then search in the menu for the a having the href equal with "pathname" and add the ".active" class!

 $('a[href$="ABC"]').






 $(function(){
    var actlink = $(location).attr('href');

    $('a[href$="actlink"]').parent("li").addClass('active');
})

or

$(function(){
    var actlink = $(location).attr('href');

    $('ul > li > a[href$="actlink"]').parent("li").addClass('active');
});

Don't know for sure it works. Haven't tested it!

edited May 23 '17 at 10:32

Community

1
1

answered Aug 26 '13 at 17:09

Andrei Terecoasa

561
2
7
25

Thank you. Do I have to do this for each list item (just beginning to learn java(jquery)? – kurt36 Aug 26 '13 at 17:37
So am i! And this should to the trick $(function(){ var actlink = $(location).attr('href'); $('a[href$="actlink"]').parent("li").addClass('active'); }); if not, try replacing a[href$="actlink"] with li > ul a[href$="actlink"] and don't forget to accept my answer:D – Andrei Terecoasa Aug 26 '13 at 19:05
Haven't been able to make it work. Could it be because my documents are .php? I placed the script in the head section of the index page like this: – kurt36 Aug 26 '13 at 21:46
I couldn't make it work, either! Even though, i don't think the idea is bad. I think the searching for the a with matching href isn't correct! – Andrei Terecoasa Aug 27 '13 at 13:17

highlight main menu item when sub item is open

1 Answers1