Что противоположно событию CLICK?

Question

У меня был список <li>, где содержимое внутри li должно выделяться жирным шрифтом при нажатии. Для этого я использовал следующий код

HTML

  <ul class="tabs">
        <li><a href="#tab1" style="padding-left:5px;">All Sectors</a></li>
        <li><a href="#tab2">Information Technology</a></li>
        <li><a href="#tab3">Manufacturing</a></li>
        <li style="border-right:none;"><a href="#tab4">Services</a></li>        
  </ul>

Jquery

$(document).ready(function() {
    $(".tabs li a").click(
        function() { $(this).css({ "font-weight" : "bold" }); }     

    );

});

Но при нажатии на элемент списка он становится жирным. Я хочу, чтобы элемент списка вернулся в нормальное состояние при нажатии другого элемента списка . Я не могу найти правильное событие. Ваша помощь будет принята с благодарностью.

Answer 1

На самом деле было бы проще сделать это на уровне <li>, чем на <a>, так как он имел бы такой же эффект полужирного шрифта (и прямой доступ к .siblings()), например так:

$(".tabs li").click(function() {
  $(this).addClass("boldClass").siblings().removeClass("boldClass");
});

Тогда вы можете использовать CSS для класса следующим образом:

.boldClass { font-weight: bold; }

Вместо .addClass("boldClass") вы можете использовать .toggleClass("boldClass"), если вы хотите щелкнуть уже жирную ссылку, чтобы отменить ее.

Answer 2

Может быть, установить другие элементы в нормальное состояние, прежде чем установить выделенный элемент на полужирный?Я не лучший с jQuery, так что этот код может быть полным дерьмом: -)

$(document).ready(function() {
    $(".tabs li a").click(
        function() { 
           $(".tabs li a").css({ "font-weight" : "normal" }); 
           $(this).css({ "font-weight" : "bold" }); 
        }     
    );
});

Answer 3

Не используйте CSS напрямую для этого. Используйте классы:

a.bold { font-weight: bold; }

с:

$("ul.tabs > li> a").click(function() {
  $(this).closest("ul.tabs").children("li").children("a.bold")
    .removeClass("bold").end().addClass("bold");
  return false;    
});

Прямые изменения CSS разрушительны . Вы не можете откатить их назад. С другой стороны, классы могут свободно добавляться и удаляться неразрушающим способом и приводить к лучшим решениям (при условии, что значения свойств CSS не динамические).

Answer 4

Может быть, вы могли бы сделать это?

$(document).ready(function() {
    $(".tabs li a").click(
        function() { 
           $(".tabs li a").css({ "font-weight" : "normal" });
           $(this).css({ "font-weight" : "bold" }); }     

    );

});

Answer 5

Хотя все вышеперечисленное предложение будет работать, мое рекомендуемое решение намного проще.JavaScript является поведенческим, поэтому его следует использовать только для этого.Поэтому я бы предложил добавить класс к родителю li при нажатии a .Вы должны просто переключить класс:

JS

​$('.tabs li a').click(function()​​​​​ {
    $(this).parent().toggleClass('bold');
    return false;
});​​​​​​​​​​​

CSS

.bold a {
    font-weight: bold; 
}​

Пример: http://jsfiddle.net/XWdVe/