Question

您好我想使用javascript来控制在翻转标签时显示的工具提示，具体取决于点击了哪个标签。

 <li id='1tab_1a' class='selected'>a id='1link_1a'  title="Customer Info Screen"><span >Customer Info</span></a></li>
  <li id='1tab_1b' >a id='1link_1b'  title="Order Detail"  ><span>Order</span></a></li>

 <li id='1tab_1c' >a id='1link_1c'  title="Phone Detail" ><span>Phone:  7093521232</span></a></li>

例如，当选择“客户信息”选项卡时，我希望工具提示如上所示，但是当“订单”是选中的选项卡时，我希望工具提示，表示客户信息详细信息，订单详细信息屏幕和电话详细信息。我怎么能使用onclick事件来控制工具提示是什么根据选择的标签显示？我有大约20套客户信息，有时不是每个人都包含所有标签和我还希望能够增加更多客户。

Answer 1

我已经部分测试了这段代码，我觉得它可能适合你。这假定<li>位于<ul>内，并且您已将onclick="onClick(this)"添加到<a>代码中。

function onClick(obj) {
    var a, li, selected, ul = obj.parentNode.parentNode;

    for (var i=0; i<ul.childNodes.length; i++) {
    li = ul.childNodes[i];

        if (li.nodeName.toUpperCase()=="LI") {
            selected = (li.className=="selected");
            a = li.firstChild;

            switch (li.id) {
                case "1tab_1a": a.title = (selected)?"Customer Info Screen":"Customer Info Detail"; break;
                case "1tab_1b": a.title = (selected)?"Order Screen":"Order Detail"; break;
                case "1tab_1c": a.title = (selected)?"Phone Screen":"Phone Detail"; break;
            }
        }
    }
}

编辑：您的示例HTML代码似乎缺少<a>标记之前的一些开放标记符号。

编辑：此方法基于<li>标记的class属性。我不确定您目前如何将该值更改为“已选择”。您可以通过将以下内容添加到if下的第一行来将其包装到此onclick函数中：

li.className = (li==obj.parentNode)?"selected":"";

如何使用javascript为标签创建工具提示

1 个答案: