3

我目前正在尝试使用 JavaScript，但在更改登录页面上的链接样式时遇到了麻烦。我所拥有的是页面右上角的四个框，单击它们可以更改登录页面的主题。单击框时，我能够更改背景和文本，但超链接保持不变。我已经阅读了其他几篇提出类似问题的帖子，但我无法根据我的情况调整代码。

我曾尝试使用 getElementById 和 getElementByclassName，但都没有产生我想要的结果。getElementById 能够更改其中一个链接，但其余的保持不变。我猜它只能在一个链接上使用，因为 id 每页只能使用一次？

当前的 JavaScript 代码被编写为四个独立的函数，但我在想也许使用一个 case 语句会更好？

我留下了 jsfiddle 的链接，但由于某种原因，onclick 函数在 jsfiddle 上不起作用。任何帮助将不胜感激。

谢谢！

http://jsfiddle.net/F4vte/

HTML

<body>
    <div id="container">
        <form>
            <input type="button" id="color-box1"
                onclick="colorText1();">

            <input type="button" id="color-box2"
                onclick="colorText2();">

            <input type="button" id="color-box3"
                onclick="colorText3();">

            <input type="button" id="color-box4"
                onclick="colorText4();">
        </form>

        <div id="centerText">
            <h1 id="name">Donald Price</h1>
            <div id="underline"></div>
            <div id="nav">
                <a href="blog.html">Blog</a>
                <a href="projects.html">Projects</a>
                <a href="contact.html">Contact</a>
                <a href="resume.html">Resume</a></p>
            </div>
        </div>
    </div>
</body>

JavaScript

function colorText1(){
    document.getElementById("name").style.color="#A32DCA";
    document.getElementById("underline").style.color="#A32DCA";
    document.getElementById("nav").style.color="#A32DCA";
    document.bgColor = '#96CA2D';
}

function colorText2(){
    document.getElementById("name").style.color="#8FB299";
    document.getElementById("underline").style.color="#8FB299";
    document.bgColor = '#FFFFFF';
}

function colorText3(){
    document.getElementById("name").style.color="#484F5B";
    document.getElementById("underline").style.color="#484F5B";
    document.bgColor = '#4BB5C1';
}

function colorText4(){
    document.getElementById("name").style.color="#FFFFFF";
    document.getElementById("underline").style.color="#FFFFFF";
    document.bgColor = '#00191C';
}

CSS

body {
font-family:Helvetica,Arial,Verdana,sans-serif;
font-size:62.5%;
width:960px;
padding-left:3px;
margin:auto;    
}

#underline {
border-bottom:3px solid;
}

#container {
width:50em;
margin-left:auto;
margin-right:auto;
margin-top:30%;
z-index:2;
}

/*color box settings*/
#color-box1,#color-box2,#color-box3,#color-box4 {
position:absolute;
top:0;
width:50px;
height:50px;
float:left;
-webkit-transition:margin .5s ease-out;
-moz-transition:margin .5s ease-out;
-o-transition:margin .5s ease-out;
border-color:#B5E655;
border-style:solid;
margin:15px;
}

#color-box1:hover, #color-box2:hover, #color-box3:hover, #color-box4:hover {
    margin-top: 4px;
}

#color-box1 {
background-color:#96CA2D;
right:0;
}

#color-box2 {
right:50px;
background-color:#FFFFFF;
}

#color-box3 {
right:100px;
background-color:#4BB5C1;
}

#color-box4 {
right:150px;
background-color:#00191C;
}

#centerText {
width:50em;
text-align:center;
}

#nav {
padding:20px;
}

#nav a {
padding-left:2px;
font-size:20px;
text-align:center;

}

a:link {
color:#000;
text-decoration:none;
}

a:visited {
text-decoration:none;
color:#999;
}

a:hover {
text-decoration:none;
color:red;
}

a:active {
text-decoration:none;
}
4

2 回答 2

2

除了@j08691 所说的需要在标题中运行现有脚本之外，

只需添加color:inherit;到您#nav a的 CSS 中的选择器。

#nav a {
    padding-left:2px;
    font-size:20px;
    text-align:center;
    color:inherit; 
}

这样，当您更改该颜色的#nav颜色时，您的链接 ( ) 将继承该颜色a。

Live Demo

于 2013-08-15T02:52:16.667 回答
0

您不能只设置 的颜色 div来更改链接的颜色。您需要获取a元素并更改其样式。可能有更好的方法可以做到这一点，但只是为了说明，您可以遍历 的子节点div：

function colorText1() {
    document.getElementById("name").style.color = "#A32DCA";
    document.getElementById("underline").style.color = "#A32DCA";
    var children = document.getElementById("nav").childNodes;
    for (var i=0; i < children.length; i++) {
        if (children[i].tagName == 'A') {
        children[i].style.color = "#A32DCA";
        }
    }
    document.bgColor = '#96CA2D';
}

看到它在更新的 jsFiddle上工作。

于 2013-08-15T02:51:17.653 回答