0

ページをリロードせずに別のテキストをアクティブに表示する小さな小さなテキストボックスに取り組んでいます。私はjavascriptを使用して、ユーザーがクリックしたリンクに基づいてテキストの段落を挿入します。動作しますが、動的に挿入されたコンテンツにスタイル属性も挿入したいと思います。divの背景が黒になるので、これを実行したいと思います。

これが私のJSです

    function navClicked(x){

        //alert("function activated");
        //alert(x);
        if (x == "aboutButton"){
            //alert("About Button");
            document.getElementById('information').innerHTML = "About Click";
        }
        else if(x == "faqButton"){
            //alert("FAQ Button");
            document.getElementById('information').innerHTML = "FAQ Click";
        }
        else if(x == "servicesButton"){
            //alert("Services Button");
            document.getElementById('information').innerHTML = "Services Click";
        }
        else{
            //alert("Contact Button");
            document.getElementById('information').innerHTML = "Contact Click";
        }
    }

これがそれに伴うhtmlです

<body>
        <div id="navigation">
            <table cellpadding="5">
                <tr>
                    <td>
                        <a onClick="navClicked('aboutButton');" style="cursor: pointer; cursor: hand;">ABOUT ATS</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('faqButton');" style="cursor: pointer; cursor: hand;">FAQ</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('servicesButton');" style="cursor: pointer; cursor: hand;">SERVICES</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <a onClick="navClicked('contactButton');" style="cursor: pointer; cursor: hand;">CONTACT</a>
                    </td>
                </tr>               
            </table>
        </div>
        <div id="information">
            <p>
                content
            </p>
        </div>
    </body>

そして最後にCSS

<style>
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
    p
    {
    color:white;
    }

    #navigation
    {   
        height:145px;
        float:left;
        width:155px;
        background:grey;
    }
    #navigation table
    {
        margin-left:auto;
        margin-right:auto;
        color:white;
    }

    #information
    {
        height:145px;
        float:left;
        width:290px;
        background:black;
    }
</style>

最終製品は機能します。ただし、新しいテキストがボックスに挿入されるたびに、黒になります。そして、あなたはテキストを読むことができません。

これがjsFiddlehttp : //jsfiddle.net/9xahg/です。

それはフィドルでは機能せず、理由はわかりませんが。ただし、新しいテキストを読み取ることができないことを除いて、すべてのブラウザで意図したとおりに機能します。

どうすればこれを修正できますか？

4

3 に答える 3

1

追加してみてください

color: white;

代わりに#informationに

それは私がそれでp要素をスタイリングしていて、新しいテキストを書くときにap要素を印刷しないからです...

それか、テキストを書くときにap要素を入れることもできます。

document.getElementById('information').innerHTML = "<p>About Click</p>";
于 2013-03-02T21:47:19.990 に答える
1

「color：white;」を追加するだけです。#information CSSステートメント：

#information
{
    height:145px;
    float:left;
    width:290px;
    background:black;
    color: white;
}

そしてそれは仕事です;）

于 2013-03-02T21:48:54.147 に答える
0

JQueryはまさにこのために作成されたため、CSSの場合と同じようにHTML要素を参照できます。JavaScriptを使用して要素のスタイルを設定する場合は、jQueryを使用することを強くお勧めします。長期的には時間の節約で報われるでしょう。あなたがそれを手に.css()入れたら、あなたを助けるための特定の機能があります。

于 2013-03-02T21:45:50.303 に答える