从链接中移除下划线和蓝色颜色

Question

我正在尝试禁用两个超链接，但是我无法去除下划线。我也想去掉蓝色。这是我的代码，但它没有去除下划线。我已经尝试将文本修饰设置为none和none !important

        $(document).ready(function ()
        {
            // See if doc upload View and Remove panel is displayed --> do they currently have a document uploaded 
            var isInline = $("#ctl00_contentMain_pnlAuthorizationForReleaseViewUploadDocument").css('display');

            // if so disable upload and electronic sig links
            if (isInline == "inline")
            {
                //Disable Upload Link after document is uploaded
                $("#ctl00_contentMain_btnUpload").attr('onclick', '').click(function (e) {
                    e.preventDefault();
                });
                $("#ctl00_contentMain_btnUpload").attr('href', '');
                $("#ctl00_contentMain_btnUpload").attr('text-decoration', 'none !important');

                //Disable Electronic Sign Link after document is uploaded
                $("#ctl00_contentMain_lnkESign").attr('onclick', '').click(function (e) {
                    e.preventDefault();
                });
                $("#ctl00_contentMain_lnkESign").attr('href', '');
                $("#ctl00_contentMain_lnkESign").attr('text-decoration', 'none !important');
            }

        });

这是aspx代码

<asp:LinkButton ID="lnkESign" 
                runat="server" 
                Text="sign"  
                TabIndex="1" 
                OnClick="lnkESign_Click">

<asp:LinkButton ID="lnkDownloadReleasefrm" runat="server" Text="Download"
                                        TabIndex="1"></asp:LinkButton>

Which renders this HTML

<a id="ctl00_contentMain_lnkESign" href="" tabindex="1" onclick="" text-decoration="none !important">sign</a>

<a href="" tabindex="2" id="ctl00_contentMain_btnUpload" onclick="" text-decoration="none !important">Upload </a>

---

编辑

以下是我最终使用的代码

    $("#ctl00_contentMain_btnUpload").attr('href', '').css('text-decoration', 'none').css('color', 'black').attr('onclick', '').click(function (e) {
        e.preventDefault();
    });

- Ronald McDonald

---

良好的实践提示：您应该考虑将 $("#ctl00_contentMain_lnkESign") $("#ctl00_contentMain_btnUpload") 对象存储在单个变量中，而不是总是请求它们到 DOM。 - fmsf

fmsf 有特定的原因要这样做吗？ - Ronald McDonald

我写了一篇文章，涵盖的主题是：http://franciscomsferreira.blogspot.com/2013/01/how-to-write-maintainable-javascript-or.html - fmsf

Answer 1

text-decoration 不是一个属性，它是CSS中的一条规则。您可以尝试以下方式：

$("#ctl00_contentMain_lnkESign").css('text-decoration', 'none');

注意：不需要使用!important，因为这将成为内联样式。

- Selvakumar Arumugam

---

它会使得在鼠标悬停和点击事件中，文本装饰变为无。 - Manish62

不，它不会使text-decoration:none在悬停时生效。不确定您所说的onclick事件是什么意思。 - Selvakumar Arumugam

我所说的onclick是指，当我单击任何一个我已经赋予id的锚标签时，当我单击该锚标签时，'text-decoration'不是none。 - Manish62

Answer 2

使用.css(key, value)代替.attr(key, value)

您将无法更改:hover、:visited等颜色，因为这些伪样式仅在样式表中起作用。可能有意义的是，在您的CSS文件中添加类似于.disabled的类，然后使用.addClass()将该CSS类添加到链接中。

- Peter Elliott

Answer 3

您可能还想考虑在样式表中定义一个类来控制禁用锚点的颜色和文本装饰，并使用jQuery切换该类，而不是使用内联样式。 CSS

/* Applied to all anchors for default enabled appearance */
.anchor
{
  ...
}

/* Applied to display a disabled anchor */
.anchor.disabled
{
  color: #ddd;
  text-decoration: none;
}

JavaScript

$("#ctl00_contentMain_lnkESign").toggleClass('disabled');

- sellmeadog