Как связать функции с JQuery

Question

Я хочу активировать интерактивную ссылку (граница и ссылка a цвет). граница переключается на нажатые ссылки, но цвет ссылки не меняется. Я хочу, чтобы активная ссылка была желтой #eab000 (граница и ссылка a цвет). и неактивные ссылки, чтобы быть черным 404040 (граница и связь a цвет)

SEE MY FIDDLE

Я пытался

$('ul li').first().css({ 
    'border':'1px solid #eab000', 
    }).find('a').css({ 
    'color':'#eab000' 
    }); 

    $('ul li').on('click',function(e){ 
    e.preventDefault(); 

    $(this).css({ 
    'border':'1px solid #eab000', 
    }).siblings('li').css({ 
    'border':'none', 
    }).find('a').css({ 
    'color':'#eab000' 
    }); 

}); 

Answer 1

Итак, как насчет того, чтобы сменить activeItem на ли, который был нажат?

$('ul li').on('click',function(e){ 
     e.preventDefault(); 
     $(this).siblings().removeClass("activeItem"); 
     $(this).addClass("activeItem"); 
    }); 

JSFiddle here

Или еще лучше, если вы, чтобы сцепление:

$('ul li').on('click',function(e){ 
     e.preventDefault(); 
     $(this).addClass("activeItem").siblings().removeClass("activeItem"); 
    }); 

Link

Я должен отметить, что я добавил следующий CSS:

ul li.activeItem 
{ 
    border: 1px solid #eab000; 
} 
ul li.activeItem a 
{ 
    color:#eab000; 
} 

Answer 2

Вы можете использовать

$('ul li').first().css({ 
    'border':'1px solid #eab000', 
    }).find('a').css({ 
    'color':'#eab000' 
    }); 

    $('ul li').on('click',function(e){ 
     e.preventDefault(); 

     $(this).css({ 
     'border':'1px solid #eab000', 
     }).find('a').css({ 
      'color' : '#eab000' 
     }).parent().siblings('li').css({ 
     'border':'none', 
     }).find('a').css({ 
     'color':'#404040' 
     }); 

    }); 

Вы использовали " .siblings "для" неактивных "ссылок, а затем устанавливая их якорные цвета для вашего активного цвета. Устанавливая привязку перед использованием «братьев и сестер», а затем используя «родительский», вы держите на постоянном уровне в цепочке.

Обратитесь скрипкой, закрепленной, here

Однако, использование определенных цветов в вашем коде делает этот вид структуры немного хрупким. Добавление/удаление класса, как показано в других примерах, является более устойчивым решением.

Answer 3

Подумайте о том, что выходит из каждого метода и, следовательно, то, что происходит в следующем:

css = вне: такие же, как в, так игнорировал для ясности

this = OUT: li щелкнул
siblings = в: Li, из: другие li с этого li нажал
find = в: других li с, из: все a s под другим li с

, если вы перенесли find вверх:

$(this).css({ 
'border':'1px solid #eab000', 
}).find('a').css({ 
'color':'#eab000' 
}).siblings('li').css({ 
'border':'none', 
}); 

, чтобы соответствовать .first то а будет работать, но братья и сестры не будет, как и сейчас:

this = OUT: li щелкнул
find = в: li щелкнул, из: все a с под щелкнули li
siblings = В: «а», из: ничего (предполагается)

так идеально, перед братьями и сестрами вы хотите каким-то образом «отменить» предыдущий find, к счастью, JQuery имеет только это: .end()

Вы можете применять это либо в оригинале (найти a затем вернуться, чтобы найти братьев и сестер) или (найти братьев и сестер затем вернуться, чтобы найти a)

Здесь он с отсутствующим дополнительного изменения цвета

$(this).css({ 
'border':'1px solid #eab000', 
}).find('a').css({ 
'color':'#eab000' 
}) 
.end() 
.siblings('li').css({ 
'border':'none', 
}).find('a').css({ 
'color':'#404040' 
});