CLICK事件的反义词是什么？

Question

我有一个列表<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属性值不是动态的).