jQuery。元素之间切换

发布于 2024-11-16 15:10:05 字数 646 浏览 0 评论 0原文

我有这个 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 代码的最后一行而发生的,但找不到其他解决方案。

谢谢你!

I have this html code

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

and this jQuery

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

The idea is that after I click the link next div becomes visible. Link itself becomes bold. Click on the another link hides any visible div, removes bold from any link and opens new div and makes another link bold.

Quite simple and works ok with only one exception: after I click the same link second time I don't need it to be bold. I understand that this happens because of the last line of the jQuery code but can't find another solution.

Thank you!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

锦上情书 2024-11-23 15:10:05

您可以检查当前链接是否已经是粗体。如果没有,那就这样吧。

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

You could check if the current link is already bold. If not, then make it so.

if ($(this).css("font-weight") != "bold") {
  $(this).css({"font-weight" : "bold"});
}
小霸王臭丫头 2024-11-23 15:10:05

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

因此,就您而言,将最后一行:更改

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

为:

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

享受!

You can use the jQuery.data function to store metadata about DOM elements.

So in your case, change last line:

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

to:

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

Enjoy!

毅然前行 2024-11-23 15:10:05

在这种情况下使用 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') ;

}); 

use toggleClass() in this case

in your css write this-

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

in 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') ;

}); 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文