Выделение одного элемента в меню списка со многими элементами

0

У меня есть меню навигации, и я пытаюсь сделать две вещи. Когда я нахожу 1 элемент списка, я пытаюсь выделить выделенный элемент, если я нажимаю на один элемент, я пытаюсь применить определенный цвет или стиль, указав, что этот элемент в настоящее время находится в фокусе или активный. Если я выбираю другой, текущий элемент деактивируется, и вновь выбранный элемент становится активным.

Это CSS, который я пробовал, но прямо сейчас все элементы выделяются, как только я нахожу элемент списка, а не только один:

#listContainer{

      margin-top:15px;
    }

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;    
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 555555px;
    padding-left: 20px;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}
#expList ul{
    margin-top: 5px;
}
#expList li:hover{
    background-color: #eee; This is where the problem is
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url('https://hosted.compulite.ca/kc/MD/SiteAssets/collapsed.png');
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url('https://hosted.compulite.ca/kc/MD/SiteAssets/expanded.png');
}

Здесь JSFiddle с большей частью кода http://jsfiddle.net/aHSmy/1/

  • 0
    Не могли бы вы также поделиться своим HTML?
  • 0
    Извините я забыл. Я добавил jsfiddle
Показать ещё 2 комментария
Теги:
list

2 ответа

1
Лучший ответ

Определите активный класс в своем css, а затем используйте Jquery для применения и удаления его

$(function() {
   $("li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

Пример Codepen

Поделиться
  • 0
    Он выделяет целые группы списка, а не отдельные элементы
  • 0
    Нам нужно увидеть ваш код в работающем JSFiddle ... он, безусловно, работает в моем примере.
Показать ещё 1 комментарий
1

Вы должны точнее настраивать свои позиции li. Поскольку ваша структура html - это "ul → li → ul → li со ссылками", и ваш css просто нацелен на первый li, который содержит все ссылки, они, конечно, все прикладывают стиль при зависании. Более правильным css-таргетингом будет:

#expList ul li:hover{
    background-color: #eee;
}

и если вы хотите настроить таргетинг на активное/фокусное состояние, вы должны использовать селекторы псевдосектора css типа :active. (подробнее о них читайте здесь: css-tricks.com/pseudo-class-selectors), или если вы хотите использовать их в течение длительного времени, пока пользователь продолжает использовать текущую страницу, используйте сценарий jQuery, предоставленный Paulie_d.

Поделиться
  • 0
    Привет Sebsemillia, я попробовал то, что вы предложили, и это работает лучше. Тем не менее, есть определенные элементы li, которые по-прежнему выделяются в блоках при наведении, и первый элемент не выделяется: jsfiddle.net/aHSmy/2
  • 0
    Я начинаю думать, что это может быть невозможно. У меня есть списки в списках, и все, что я применяю к родительскому get, применяется к дочерним спискам. Мне может понадобиться новый подход.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню