jQuery - 文本装饰下划线切换

时间:2014-08-09 03:39:06

标签: javascript jquery toggle

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

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

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

2 个答案:

答案 0 :(得分:3)

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

.underline{
    text-decoration:underline;
}

这个使用的脚本以选择器

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

UPDATED DEMO

答案 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/