Question

链接到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";
}

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

Answer 1

这将显着改变你这样做的方式，但你可以使用不同的css文件然后你jquery在点击之间交换它们如下：

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

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

Answer 2

你是对的，你需要在每个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");
}

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

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

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

如何在点击后获取所有超链接以更改颜色？

3 个答案: