Наведите, используя JavaScript - PullRequest
Новая
       10

Наведите, используя JavaScript

0 голосов
/ 24 октября 2009

Вот что я хотел бы сделать. У меня есть 2 одинаковых списка, которые я хотел бы изменить цвет при наведении на определенный элемент в обоих списках одновременно.

Пример:

Список один
Элемент списка 1
Элемент списка 2
Элемент списка 3

Список второй
Элемент списка 1
Элемент списка 2
Элемент списка 3

Так что, если вы наводите курсор на первый элемент Списка Один, он также выделит первый элемент Списка Два.

Любая помощь в этом спасет мою жизнь, большое спасибо. В

Ответы [ 3 ]

1 голос
/ 24 октября 2009

Пример кода: 

<style>
.active { color: red; font-weight: bold; }
</style>
<body>
<ul id="list1">
 <li>foo</li>
 <li>bar</li>
</ul>
<ul id="list2">
 <li>foo</li>
 <li>bar</li>
</ul>
<script>
(function() {
    var list1 = document.getElementById('list1'),
        list2 = document.getElementById('list2');

    function setActive(target, b) {
        if(!target.tagName.toLowerCase() === 'li') return;

        // determine position in list:
        for(var i = 0; target = target.previousSibling; ++i);

        list1.childNodes[i].className = b ? 'active' : '';
        list2.childNodes[i].className = b ? 'active' : '';
    }

    // mouseover/mouseout are bubbling, so add the listeners to parents:

    list1.onmouseover = list2.onmouseover = function(event) {
        setActive((event && event.target) || window.event.srcElement, true);
    };

    list1.onmouseout = list2.onmouseout = function(event) {
        setActive((event && event.target) || window.event.srcElement, false);
    };
})();
</script>
0 голосов
/ 25 октября 2009

HTML 

 <ul id="list1">
     <li>item 1</li>
     <li>item 2</li>
 </ul>

 <ul id="list2">
     <li>item 1</li>
     <li>item 2</li>
 </ul>

JQuery 

 $("#list1 li").hover(
         function(){
                var ind = $("#list1 li").index($(this));
               $("#list2 li:eq(" + ind + ")").addClass("highlight"); 
               $(this).addClass("highlight");
         },
         function(){
         var ind = $("#list1 li").index($(this));
              $("#list2 li:eq(" + ind + ")").removeClass("highlight");
                               $(this).removeClass("highlight");
         }
   );

У класса подсветки будет стиль, который вы хотите применить к обоим спискам.

0 голосов
/ 24 октября 2009

Прямо в моей голове, вы можете использовать jquery, чтобы выбрать определенный тег в каждом списке и применить к нему стиль. Возможно, используйте метод .addClass, чтобы добавить стиль CSS к тем же элементам в массиве тегов для обоих списков выбора.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...