Question

I have a submenu that has all items linked to the same node, but with different additional parameters, for ex:

...
<li...><a href = "/?q=page1&filter=10" class = "... active">Item1</a></li>
<li...><a href = "/?q=page1&filter=11" class = "... active">Item2</a></li>
...

in this case all items have class ‘active’ and none of them has class ‘active-trail’.

Is there any way to identify the true active link (for styling purposes)?

any suggestions will be much appreciated!

Answer 1

You could also style the active link using Javascript, though admittedly it is rather verbose. Here is the code and you would just change the styles to be how you want.

window.onload = kickOff;

var aAll;

function kickOff() {
    aAll = document.getElementsByTagName("a");
    // disable and change color of active page's link
    for (var i=0; i<aAll.length; i++) {
        if (window.location.href.split("#")[0] == aAll[i].href) {
            aAll[i].onclick = function() {if (this.blur) {this.blur();} return false;}
            aAll[i].style.cursor = "text";
            aAll[i].style.borderBottom = "none";
            aAll[i].style.color = "#FFFFFF";
            aAll[i].style.textShadow = "none";
            if (aAll[i].className == "site") {
                aAll[i].style.color = "#ffffff";
            }
            else {
            aAll[i].style.background = "#a5a9b3 scroll 0pt 100%";
            }
        }
        // fix ie's lack of support for css :focus so tabbers see skip links on focus
        if (navigator.appName == "Microsoft Internet Explorer" && aAll[i].className == "skip") {
            var restoreColor = aAll[i].style.color;
            var restoreBorder = aAll[i].style.borderBottom;
            aAll[i].onfocus = function() {this.style.color = "#999999"; this.style.borderBottom = "1px solid #999999";}
            aAll[i].onblur = function() {this.style.color = restoreColor; this.style.borderBottom = restoreBorder;}
        }
     }
    // fixes in-page link bug for Internet Explorer
    if (navigator.appName == "Microsoft Internet Explorer") {
        getElementsByClass("target");
    }
}

function getElementsByClass(searchClass,node,tag) {
    // fixes in-page link bug for Internet Explorer; first find all destinations (elements with classname "target"):
    var classElements = new Array();
    if ( node == null ) {
            node = document;
    }
    if ( tag == null ) {
            tag = '*';
    }
    var elAll = node.getElementsByTagName(tag);
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (var i = 0, j = 0; i < elAll.length; i++) {
        if (pattern.test(elAll[i].className)) {
            classElements[j] = elAll[i];
            j++;
        }
    }
    // then insert what is an invalid attribute for most elements, with an invalid value to boot:
    for (var i=0; i<classElements.length; i++) {
        classElements[i].setAttribute("tabIndex",-1)
    }
}