Question

I have a Mega Menu navigation that generates its content from custom lists. Each ‘Tab’ on the Mega Menu links to a different document library. I want to highlight the tab of the currently selected document library.

Each ‘tab’ already has a class attribute but I am having trouble giving the document library an ID or Class attribute, or finding one that is already there.

I have added a content editor web part in one of the document libraries, which is a blank html text file that has a body ID. When I reference it in the CSS I am able to achieve the highlighting of the tab when on that document library. However this only applies to the certain view that I am in. When changed to another view on the same document library (I have about 15-20 views) the highlighting disappears because there is no content editor web part in that view.

So to sum up – how can I use a universal ID or Class attribute that will not change each time a view is changed in a document library?

Thanks.

Answer 1

I ended up just using jQuery for this. Put it in my master page in a script tag.

if ( document.location.href.indexOf('<string in URL - I used the name of the document library') > -1 ) {
        $('UL#topnav A.SecondTab').css('background-image', 'url(highlightedtab.jpg)');
    }

Used several if statements because each tab has a different class name, e.g. FirstTab, SecondTab etc.