HTML如何設定點擊超連結變成灰色

coldplay.xixi
發布: 2023-01-03 09:27:45
原創
4812 人瀏覽過

HTML設定點選超連結變成灰色的方法:先載入尋找超連結的函式;然後用【

】取代了【】標籤;最後在

標籤中內嵌了【】標籤,【】的顏色設為了灰色。

HTML如何設定點擊超連結變成灰色本教學操作環境:windows7系統、html5版,DELL G3電腦。

HTML設定點擊超連結變成灰色的方法:

#一、尋找HTML超連結

      要想讓超連結失效變灰色,首先要做的事情是找到超連結。尋找超連結的方法有很多,如果採用W3C的方法,就是如下寫法:

document.getElementsByTagName("a")
登入後複製

      如果覺得W3C的方法太長了或不美觀,可以使用一些JavaScript函式庫,例如jQuery或Mootools。這樣取得超連結就非常簡潔。

      您也可以使用在<a></a>標籤上加上ID的方式,但是有個小缺點。如果您是針對全篇的超鏈接,這種加ID的方式就增大了工作量。

二、改變HTML超連結

    找到超連結之後,接下來要做的事情就是改變超鏈接,使其失效並且變成灰色。讓超連結失效的方式有好幾種,最常見的就是把href屬性設為「#」。實際上這種方式根本就沒有改變超鏈接,只是使得href屬性沒有指向一個合理的鏈接而已。

    真正改變超連結的方式是讓其變成普通文本,而且文字的字體顏色是灰色的。如同以下效果:

HTML如何設定點擊超連結變成灰色

     好了,閒話就不扯了,讓我們進入正題。下面的程式碼是HTML文件一載入完畢就立刻執行函數。

var addLoadEvent=function(func) {
    var oldonload = window.onload;
    if (typeof window.onload != &#39;function&#39;) {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
};
登入後複製

        這個函數是為了後面載入尋找超連結的函數。下面是獲取HTML文件中超鏈接,並且使其失效變灰色。

var getLinks=function() {
if(!document.getElementsByTagName)return false;
if(!document.createElement)return false;
if(!document.getElementsByName("a"))return false;
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        //判断href属性是否包含“#”符号
        if ((links[i].getAttribute("href").indexOf("#")) >= 0) {
            var para = document.createElement("p");
            var fon = document.createElement("font");
            fon.setAttribute("color", "#808080");
            fon.innerHTML =links[i].lastChild.nodeValue;
            var content = para.appendChild(fon);
            replaceEach(links[i], content);
        } else {
            links[i].style.color = "990033";
        }
    }
};
登入後複製

        透過閱讀上述程式碼,相信讀者已經明白了。改變超連結的方式其實是用

取代了標籤。並且在

標籤中內嵌了標籤,的顏色設為了灰色,就達到了我們想要的效果。

      其中用到了替換函數replaceEach,下面給出replaceEach函數的程式碼。

        最後別忘記了最重要的一步,在addLoadEvent函數中載入尋找函數,如下:

相關學習推薦:html影片教學

以上是HTML如何設定點擊超連結變成灰色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板