如何使所有超链接在单击后改变颜色？

Question

如何使所有超链接在单击后改变颜色？

3

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

我离成功真的很近了。目前只完成了一半的工作。例如，当我点击“Adventure”时，正文变成了蓝色，但我需要所有超链接也变成蓝色。浪漫是红色的，放松是绿色的，家庭是棕色的。我需要将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";
}

如果您认为弹出窗口的脚本与其不起作用有关，请忽略它。谢谢！

- HappyHands31

3个回答

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");
}

- Gregg Duncan

1

在您的事件处理程序中使用类似这样的东西如何？

//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
});

这里发生的情况是，您使用call()将slice()作为NodeList的函数进行调用。在这种情况下，slice()会创建一个空数组，然后遍历正在运行的对象（最初是数组，现在是NodeList），并将该对象的元素附加到它创建的空数组中，最终返回该数组。

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

- TrojanMorse

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blake · Accepted Answer

这将显著改变您的操作方式，但您可以使用不同的CSS文件，然后使用jquery在单击时切换它们，如下所示：

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

然后只需在样式表中放置特定的颜色、图像等内容。