Question

我有这个HTML代码

<a href="#">Link</a>
<div>Content</div>
<a href="#">Link</a>
<div>Content</div>

和这个jQuery

$('a').click(
function(){
    $("div:visible").slideUp(100),
    $(this).next("div:hidden").slideDown(100),
    $('a').css({"font-weight" : "normal"}),
    $(this).css({"font-weight" : "bold"});
});

我的想法是，点击链接后，下一个div变为可见。链接本身变为粗体。点击另一个链接隐藏任何可见的div，从任何链接中删除粗体并打开新的div并使另一个链接变为粗体。

非常简单，但只有一个例外：我点击第二次相同的链接后，我不需要它粗体。我知道这是因为jQuery代码的最后一行，但找不到另一种解决方案。

谢谢！

Answer 1

您可以检查当前链接是否已加粗。如果没有，那就这样做。

if ($(this).css("font-weight") != "bold") {
  $(this).css({"font-weight" : "bold"});
}

Answer 2

在这种情况下使用toggleClass()

在你的CSS中

写这个 -

.normal{"font-weight" : "normal"}
.bold{"font-weight" : "bold"}

在jquery中

-

$('a').click(  function(){ 

$('a.bold').removeClass('bold'); // will remove bold class from all link   

$("div:visible").slideUp(100),     
 $(this).next("div:hidden").slideDown(100)      

$(this).toggleClass('normal bold') ;

});

Answer 3

您可以使用jQuery.data函数存储有关DOM元素的元数据。

所以在你的情况下，改变最后一行：

$(this).css({"font-weight" : "bold"});

为：

if ($(this).data('clicked') == undefined) $(this).css({"font-weight" : "bold"});
$(this).data('clicked', true);

享受！

jQuery的。在元素之间切换

3 个答案: