XPages - onClick and onMouseOver for Navigation Items

Question

I have an XPage which contains a Navigator control. The navigator has 3 Navigation Items, each of which is a basic node. The onClick event of the basic node executes some client side javascript. I would like to change the background color of the navigation item when it is clicked. I've tried doing this with javascript and dojo but just can't get a handle on the navigation item basic node. What code can I use to get hold of the navigation item basic node so that I can then use CSS to change it's appearance? With Dojo I have tried

dojo.query(".lotusMenuHeader ul :nth-child(1)")

I now have a soloution thanks to Michael Saiz. What I wanted to do was add the "lotusSelected" class to a Navigator item when it was clicked using client side JavaScript (and remove this class from the other items). My navigator has just three items so here is the code I'm now using to get this working:

var comp = this;
var par = comp.parentNode; // li tag
par.id = "parID";
var par2 = par.parentNode; // ul tag
par2.id = "ul_node;"
var eigene = par2.childNodes[1];
eigene.id = "eigene";
var alle = par2.childNodes[3];
alle.id = "alle";
var abgeschlossen = par2.childNodes[5];
abgeschlossen.id = "abgeschlossen";

dojo.removeClass("alle","lotusSelected");
dojo.removeClass("abgeschlossen","lotusSelected");
dojo.addClass("eigene","lotusSelected")      

Answer 1

There is a nice trick i found while working with the onClick event in the Navigator. You can get a handle on the Item itself using this. and then set a id or do some direct modification with the item without to query the whole page or css Classes:

  <xe:basicLeafNode label="Link 1">
        <xe:this.onClick><![CDATA[var comp = this;
    this.id = "item1"; // example
    window.alert(this.id);
    //call a function form a script lib. like changeColor(this,color);
    this.style.backgroundColor = "blue";]]></xe:this.onClick>
    </xe:basicLeafNode>

For the MouseOver Efect you could use the hover: css to change the color of the item e.g: I use this to get a MouseOver efekt in my view:

.xspHtmlProdView:hover{background-color:#ffffc8;}

For the Navigation Items i think you will need menuitem:hover {} or something like lotusMenuHeader > li {}

Answer 2

You want to look for .lotusTitleBar ul.lotusTabs div a (in R9/OneUIv3 it looks like .lotusTitleBar2 .lotusNavTabs div a and then use dojo.connect to attach an event to them. Dojo connect will fire with the element it was connected to. So you don't need to look through the index.

Let us know how it goes