Как сохранить выделенный элемент списка после того, как я щелкну по нему? - PullRequest
Новая
       12

Как сохранить выделенный элемент списка после того, как я щелкну по нему?

0 голосов
/ 13 апреля 2011

Этот вопрос касается выделения элементов списка.

Я выделяю элементы списка с помощью следующих классов. 

ul.category_list li {
  background: none repeat scroll 0 0 #B73737;
  border-bottom: 1px solid #CCCCCC;
  color: #953131;
  display: block;
  height: 29px;
  width: 242px;
}

ul.category_list li a:link,ul.category_list a:visited { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #fff; text-decoration: none; color: #666; }

    ul.category_list li a:hover { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #e5e5e5 url(../images/disc_apps/nav_over.jpg) no-repeat; text-decoration: none; color: #666; }

    ul.category_list li a:active { 
        display: block; width: 227px; height: 18px; padding: 5px 0 6px 15px;
        background: #e5e5e5; text-decoration: none; color: #666;  }

Пожалуйста, обратитесь к этому рабочему примеру на http://jsfiddle.net/XMbAS/

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

спасибо

Ответы [ 2 ]

6 голосов
/ 13 апреля 2011

Я изменил вашу демо здесь:

http://jsfiddle.net/XMbAS/2/

Редактировать: Это простое и простое решение с использованием класса CSS.Сначала вы сбрасываете все элементы с этим классом, а затем добавляете его в выбранный элемент списка из вашего определенного списка.

Редактировать: Демо с включенным наведением:
http://jsfiddle.net/balron/XMbAS/7/

В моем сценарии я добавляю и удаляю только один класс, поэтому все определения наведения все равно должны работать без проблем.Это все о CSS в конце концов.Извините, что не сделал это в вашем коде, но я прекратил пытаться скопировать вставку .. Так что на самом деле отсутствует копия с включенным пробелом.Также jsfiddle не слушал меня, когда я пытался изменить ваш пример.

3 голосов
/ 13 апреля 2011

Самый простой способ с помощью jQuery: 

$('a').click(
    function(){
        $('.highlight').removeClass('highlight');
        $(this).closest('li').addClass('highlight');

        // I'd use:
        // return false;
        // as well, but you've addressed that already, in your inline onclick handlers.

    });

Демонстрация JS Fiddle .

Но это без просмотра оставшейся части вашего JavaScript или пользовательского интерфейса,Поэтому вам, возможно, придется адаптировать его к вашим потребностям.

Пересмотр jQuery для лучшего соответствия вашим потребностям и демонстрации использования CSS: hover 

$('li').click(
    function(){
        $('.highlight').removeClass('highlight');
        $(this).addClass('highlight');
    });

CSS: 

li {
    background-color: #fff;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
}

.highlight,
li:hover {
    background-color: #ffa;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
}

Пересмотренный JS Fiddle с использованием CSS: hover псевдоэлемент

В качестве альтернативы используйте метод jQuery hover(): 

$('li').click(
    function(){
        $('.highlight').removeClass('highlight');
        $(this).addClass('highlight');
    });

$('li').hover(
    function(){
        $(this).addClass('highlight');
    },
    function(){
        $(this).removeClass('highlight');
    });

Демонстрация JS Fiddle с использованием метода jQuery hover() .

Ссылки:

...