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是行为，所以它应该只是用于它。因此，我建议在单击 a 时向父 li 添加一个类。你应该只是切换一个类：

JS

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

CSS

.bold a {
    font-weight: bold; 
}

示例：http://jsfiddle.net/XWdVe/

CLICK事件的反义词是什么？

5 个答案: