更改链接颜色弹出窗口

时间:2014-02-07 01:45:23

标签: javascript html css popup

有没有办法将链接颜色更改为灰色而不会在我的网站上出现代码故障。 (代码故障并说快速导航。)

Click here to see page with glitch

我只希望那个链接为粗体而不是另一个。

下面是当前的代码。

     <script type="text/javascript">
// Popup window code
function newPopup(url) {
    popupWindow = window.open(
        url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a style="text-decoration:none;" href="JavaScript:newPopup('<font color="gray">http://onlythebestoftheweb.x10.mx/navigation/quick.html</font>');">Quick Nav.</a>

也只是为了让你知道该页面应该是404错误,这就是故障所在。

3 个答案:

答案 0 :(得分:0)

  1. 用于将链接颜色更改为灰色:

    <强> CSS

    a {
        color: #848484;
    }
    
  2. 你的代码“毛刺”的原因是因为这一行:

    <a style="text-decoration:none;" href="JavaScript:newPopup('<font color="gray">http://onlythebestoftheweb.x10.mx/navigation/quick.html</font>');">Quick Nav.</a>
    

    您需要在双引号内转义双引号才能使其正常工作:

    <a style="text-decoration:none;" href="JavaScript:newPopup('<font color=\"gray\">http://onlythebestoftheweb.x10.mx/navigation/quick.html</font>');">Quick Nav.</a>
    

答案 1 :(得分:0)

由于您正在使用CSS,因此您只想获取弹出窗口的链接,为其命名,并使用CSS为类名称设置样式。

添加这些CSS行

CSS:

a.popup-link {
    color: grey;
    text-decoration: none;
}

然后将弹出窗口的链接更改为以下内容:

HTML:
<a class="popup-link" href="JavaScript:newPopup('http://onlythebestoftheweb.x10.mx/navigation/quick.html');">Quick Nav.</a>

答案 2 :(得分:0)

在这里,这是一个更清洁的练习。

http://jsfiddle.net/wkYJ5/3/

-

<script type="text/javascript">
    // Popup window code
    var newPopup = function () {

        if (this.style.color === 'green' || this.style.color==='') { this.style.color = 'red'; } else { this.style.color = 'green' };

        var popupWindow = window.open(
            this.url, 'popUpWindow', 'height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');

        return false;
    };
    setTimeout(function () {

        var qnLk = document.getElementById('qnLk');
        qnLk.onclick = newPopup;
        qnLk.url = 'http://onlythebestoftheweb.x10.mx/navigation/quick.html';

    }, 100);
</script>

-

<a id="qnLk" style="text-decoration:none;color:green;" href="#">Quick Nav.</a>