Что происходит против события 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>, так как он будет иметь тот же Bolding эффект (и прямой доступ к .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

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

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

    ); 

}); 

Answer 4

Не используйте 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 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/