Question

我正在尝试编写文字装饰切换。

当我点击链接时，链接应加下划线，如果我再次点击它，则链接不应加下划线。它也应该切换，例如，如果单击第一个链接一次，然后单击第三个链接，第一个链接不应加下划线等。

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的新手。我希望有办法做到这一点。感谢您抽出宝贵时间回答我的问题。

Answer 1

你可以为此写一些css，如下所述

.underline{
    text-decoration:underline;
}

这个使用的脚本以选择器

开头

$("a[class^='underlinetoggle']").click(function () {
  $(this).siblings().removeClass('underline');
  $(this).toggleClass('underline');
});

UPDATED DEMO

Answer 2

尝试这是你想要的工作。请问，如果它是你想要的。

$(".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/

jQuery - 文本装饰下划线切换

2 个答案: