3

現在 JavaScript を試していますが、ランディング ページのリンクのスタイルを変更するのに問題があります。私が持っているのは、ページの右上にある 4 つのボックスで、クリックするとランディング ページのテーマが変更されます。ボックスをクリックすると背景とテキストを変更できましたが、ハイパーリンクは変更されません。同様の質問をする他のいくつかの投稿を読みましたが、コードを自分の状況に適応させることができませんでした。

getElementById と getElementByclassName を使用してみましたが、探していた結果が得られませんでした。getElementById はリンクの 1 つを変更できましたが、残りは変更されませんでした。IDはページごとに1回しか使用できないため、1つのリンクでのみ機能すると思いますか?

現在の JavaScript コードは 4 つの別々の関数として記述されていますが、case ステートメントを 1 つ使用した方がよいのではないかと考えていました。

jsfiddle へのリンクを残しましたが、なぜか jsfiddle で onclick 機能が動作しません。どんな助けでも大歓迎です。

ありがとうございました！

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がヘッダーで既存のスクリプトを実行する必要があると言ったことは別として、

CSS のセレクターに追加color:inherit;するだけです。#nav a

#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 に答える