如何获取所有超链接以在单击时更改颜色？答案

【问题标题】：How To Get All Hyperlinks to Change Colors Upon Click?如何获取所有超链接以在单击时更改颜色？
【发布时间】：2016-01-14 14:55:25
【问题描述】：

链接到 JSfiddle： http://jsfiddle.net/HappyHands31/LnbzgL14/

我真的很接近让它发挥作用。现在它只工作了一半。例如，当我单击“冒险”时，正文变为蓝色，但我需要所有超链接也变为蓝色。浪漫是红色，放松是绿色，家庭是棕色。我是否需要以某种方式将 colorLinks 函数放入 change_color 函数中？让我知道是否需要进一步澄清。谢谢！

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Castaway Vacations, LLC</title>
    </head>
    <body leftmargin=0 rightmargin=0 bgcolor=#ffcc99 text=#993300 link=#993300 vlink=#996633>
        <br>
        <table width=100% border=0 cellpadding=0 cellspacing=0>
            <tr>
                <td width=95% align="right" bgcolor=#ffffff>
                    <img src="castaway_logo.jpg">
                    <br>
                    <font face=arial>Vacations, LLC</font></td>
                <td bgcolor=#ffffff>&nbsp;</td>
            </tr>
        </table>
        <br>
        <br>
        <div align="center">
            <table width=600>
                <tr>
                    <td width=300 valign="top">
                        <font face=arial size=3><b><i>Select Mood...</i></b></font>
                        <br>
                        <br>
                        <font face=arial>
       <a style="text-decoration:none" id="one" href="#">Romantic</a>
       <br><br>
       <a style="text-decoration:none" id="two" href="#">Adventure</a>
       <br><br>
       <a style="text-decoration:none" id="three" href="#">Relaxation</a>
       <br><br>
       <a style="text-decoration:none" id="four" href="#">Family</a><br>
       <br><br>
       <br>
       <a style="text-decoration:none" id="reqBrochure" href="#">
       Request Brochure...</a>
       </font>
                    </td>
                    <td align="center"><img id="original.jpg" src="orig_main.jpg">
                        <br>
                        <i>Your Vacation Awaits!

      </tr>
      </center>
    <script src="castaway.js"></script>
    </body>
</html>
</DOCTYPE>

Javascript：

document.getElementById('one').addEventListener('click', change_color);
document.getElementById('two').addEventListener('click', change_color2);
document.getElementById('three').addEventListener('click', change_color3);
document.getElementById('four').addEventListener('click', change_color4);
document.getElementById('reqBrochure').addEventListener('click',
    openWindow);

function change_color() {
    document.body.style.color = "red";
    document.body.style.background = "purple";
    document.getElementById("original.jpg").src = "rom_main.jpg";
}

function change_color2() {
    document.body.style.color = "blue";
    document.body.style.background = "orange";
    document.getElementById("original.jpg").src = "adv_main.jpg";
}

function change_color3() {
    document.body.style.color = "green";
    document.body.style.background = "#47D1FF";
    document.getElementById("original.jpg").src = "rel_main.jpg";
}

function change_color4() {
    document.body.style.color = "brown";
    document.body.style.background = "black";
    document.getElementById("original.jpg").src = "fam_main.jpg";
}

colorLinks("red");

function colorLinks(color) {

    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        if (links[i].href) {
            links[i].style.color = color;
        }
    }
}

//pop-up form window;

var win; // makes variable global;
function openWindow() {
    win = window.open("form.html", "form", "width=400,height=350");
}

function closeWindow() {
    win.close();
    var openLink = document.getElementById('reqBrochure');
    openLink.innerHTML = "Request Submitted";
}

忽略弹出表单窗口的脚本，除非您认为这与它无法正常工作的原因有关。谢谢！

【问题讨论】：

标签： javascript jquery html function hyperlink

【解决方案1】：

您是正确的，您需要在每个 change_color 函数中调用 colorLinks 函数，如下所示：http://jsfiddle.net/LnbzgL14/2/

function change_color(){
    document.body.style.color = "red";
    document.body.style.background = "purple";
    document.getElementById("original.jpg").src = "rom_main.jpg";
    colorLinks("red");
}

【讨论】：

【解决方案2】：

这将显着改变您执行此操作的方式，但您可以使用不同的 css 文件，然后您在点击时使用 jquery 在它们之间进行交换，如下所示：

$("one").click(function() { $("link[rel=stylesheet]").attr({href : "AdventureStyle.css"}); })

然后只需将特定的颜色、imgs 等放在样式表中即可。

【讨论】：

我对 javascript 非常陌生，对 jQuery 完全陌生，所以请与我交流。
如您所见，它们固定在我在 CSS 中定义它们的颜色中，但我需要在单击特定单词时将它们全部更改为该颜色。
或者您的意思是尝试使用多个 CSS 文件？
不，这根本不起作用。请检查我的 JSfiddle 并让我知道我做错了什么，如果你能这么好。
所以我建议使用多个 CSS 文件并使用上面的代码来交换这些文件。

【解决方案3】：

在你的事件处理程序中使用这样的东西怎么样

//get a tags
var elements = document.querySelectorAll('a');

//iterate through each link on the page and change the color
[].slice.call(elements).forEach(function(elem) {
    elem.style.color = 'red'; //change this to the relevant color
});

这里发生的事情是你调用 slice() 就好像它是使用 call() 的 NodeList 的一个函数。在这种情况下， slice() 所做的是创建一个空数组，然后遍历它正在运行的对象（最初是一个数组，现在是一个 NodeList）并继续将该对象的元素附加到它创建的空数组中，最终返回.

JSFiddle - https://jsfiddle.net/ToreanJoel/u4of4ob2/

【讨论】：