Как создать всплывающие подсказки с помощью JavaScript для вкладок - PullRequest
Новая
       40

Как создать всплывающие подсказки с помощью JavaScript для вкладок

0 голосов
/ 21 января 2011

Привет! Я хотел бы использовать 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 наборов информации о клиентах, и иногда не все содержат все вкладки, и я также хотел бы иметь возможность добавлять больше клиентов.

1 Ответ

0 голосов
/ 22 января 2011

Я частично протестировал этот код, и я думаю, что он может работать для вас.Это предполагает, что <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>.Я не уверен, как вы меняете это значение на «выбранное».Вы можете включить его в эту функцию onclick, добавив следующую строку в первую строку под if: 

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