jQuery。元素之间切换
我有这个 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以检查当前链接是否已经是粗体。如果没有,那就这样吧。
You could check if the current link is already bold. If not, then make it so.
您可以使用 jQuery.data 函数来存储有关 DOM 元素的元数据。
因此,就您而言,将最后一行:更改
为:
享受!
You can use the jQuery.data function to store metadata about DOM elements.
So in your case, change last line:
to:
Enjoy!
在这种情况下使用
toggleClass()
在你的 css 中写这个 -
在 jquery -
use
toggleClass()
in this casein your css write this-
in jquery -