我正在尝试编写文字装饰切换。
当我点击链接时,链接应加下划线,如果我再次点击它,则链接不应加下划线。它也应该切换,例如,如果单击第一个链接一次,然后单击第三个链接,第一个链接不应加下划线等。
jQuery代码:
$(".underlinetoggle").click(function () {
if($(".underlinetoggle").css('text-decoration', 'none')) {
$(".underlinetoggle").css('text-decoration', 'underline');
}
else if($(".underlinetoggle").css('text-decoration', 'underline')){
$(".underlinetoggle").css('text-decoration', 'none');
}
});
HTML:
<a class="underlinetoggle-one">Link to toggle 1</a>
<a class="underlinetoggle-two">Link to toggle 2</a>
<a class="underlinetoggle-three">Link to toggle 3</a>
CSS:
.underlinetoggle {
text-decoration: none;
color: orange;
}
很抱歉,如果我犯了一个很难的错误,因为我是jQuery / JavaScript的新手。 我希望有办法做到这一点。感谢您抽出宝贵时间回答我的问题。
答案 0 :(得分:3)
你可以为此写一些css
,如下所述
.underline{
text-decoration:underline;
}
这个使用的脚本以选择器
开头$("a[class^='underlinetoggle']").click(function () {
$(this).siblings().removeClass('underline');
$(this).toggleClass('underline');
});
答案 1 :(得分:0)
尝试这是你想要的工作。请问,如果它是你想要的。
$(".anchorToggle").click(function () {
if($(this).css('text-decoration')=="none"){
$(this).css('text-decoration', 'underline');
}
else
$(this).css('text-decoration', 'none');
});
请参阅fsfiddle链接http://jsfiddle.net/gaurav22031987/2c5vbq1q/7/