javascript - XPage - 用于导航项目的 onClick 和 onMouseOver

Question

我有一个包含导航器控件的 XPage。导航器有3个导航项，每个导航项都是一个基本节点。基本节点的 onClick 事件执行一些客户端 JavaScript。我想在单击导航项时更改其背景颜色。我尝试使用 javascript 和 dojo 执行此操作，但无法获取导航项基本节点的句柄。我可以使用什么代码来获取导航项基本节点，以便我可以使用 CSS 更改其外观？我已经尝试过使用Dojo

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

感谢 Michael Saiz，我现在有了解决方案。我想要做的是，当使用客户端 JavaScript 单击导航器项目时，将“lotusSelected”类添加到导航器项目中(并从其他项目中删除此类)。我的导航器只有三个项目，因此这是我现在用来实现此功能的代码:

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

我在处理导航器中的 onClick 事件时发现了一个很好的技巧。您可以使用它来获取项目本身的句柄。然后设置一个 id 或对该项目进行一些直接修改，而无需查询整个页面或 css 类:

  <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>

对于MouseOver效果，您可以使用hover: css来更改项目的颜色，例如:我用它来在我的 View 中获得 MouseOver 效果:

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

对于导航项，我认为您需要 menuitem:hover {} 或类似 lotusMenuHeader > li {}